Angular弹出模态框的两种方式


Posted in Javascript onOctober 19, 2017

在开始我们的blog之前,我们要先安装ngx-bootstrap-modal

npm install ngx-bootstrap-modal --save

不然我们的模态框效果会难看到你想吐

一、弹出方式一(此方法来自https://github.com/cipchk/ngx-bootstrap-modal)

1.alert弹框

(1)demo目录

--------app.component.ts

--------app.component.html

--------app.module.ts

--------detail(文件夹)

------------detail.component.ts

------------detail.component.html

(2)demo代码

app.module.ts导入必要的BootstrapModalModule 和ModalModule ,再注册它们

//app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
//这种模态框只需要导入下面这两个
import { BootstrapModalModule } from 'ngx-bootstrap-modal';
import { ModalModule } from 'ngx-bootstrap/modal';
import { AppComponent } from './app.component';
import { DetailComponent } from './detail/detail.component';
@NgModule({
 declarations: [
 AppComponent,
 DetailComponent
 ],
 imports: [
 BrowserModule,
 BootstrapModalModule
 ],
 providers: [],
 entryComponents: [
 DetailComponent
 ],
 bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html创建一个可以弹出模态框的按钮

<div class="container">
 <div class="row">
 <button type="button" class="btn btn-primary" (click)="showAlert()">alert模态框</button>
 </div> 
</div>

app.component.ts编写这个按钮的动作showAlert()

import { Component } from '@angular/core';
import { DialogService } from "ngx-bootstrap-modal";
import { DetailComponent } from './detail/detail.component'
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 title = 'app';
 constructor(public dialogService: DialogService) {
 } 
 showAlert() {
  this.dialogService.addDialog(DetailComponent, { title: 'Alert title!', message: 'Alert message!!!' });
 }
}

detail.component.html编写alert弹框的布局

<div class="modal-dialog">
 <div class="modal-content">
  <div class="modal-header">
   <button type="button" class="close" (click)="close()" >×</button>
   <h4 class="modal-title">{{title}}</h4>
  </div>
  <div class="modal-body">
   这是alert弹框
  </div>
  <div class="modal-footer">
   <button type="button" class="btn btn-primary" (click)="close()">取消</button>
   <button type="button" class="btn btn-default">确定</button>
  </div>
 </div>
</div>

detail.component.ts创建模态框组件,我们需要创建一个组件,然后由 ngx-bootstrap-model 帮忙引导启动
对于这个组件需要继承 DialogComponent<T, T1> 类,包含两个参数:

T 外部传参给模态框的类型。

T1 模态框返回值类型。

因此,DialogService应该是DialogComponent的一个构造函数的参数。

import { Component } from '@angular/core';
import { DialogComponent, DialogService } from 'ngx-bootstrap-modal';
export interface AlertModel {
 title: string;
 message: string;
}
@Component({
 selector: 'alert',
 templateUrl: './detail.component.html',
 styleUrls: ['./detail.component.css']
})
export class DetailComponent extends DialogComponent<AlertModel, null> implements AlertModel {
 title: string;
 message: string;
 constructor(dialogService: DialogService) {
 super(dialogService);
 }
}

2.confirm弹框

(1)demo目录

--------app.component.ts
--------app.component.html
--------app.module.ts
--------confirm(文件夹)
------------confirm.component.ts
------------confirm.component.html

(2)demo代码

app.module.ts导入必要的BootstrapModalModule 和ModalModule ,再注册它们,这些都跟alert弹框一样,因为这些都是方法一的弹出方式

//app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
//这种模态框只需要导入下面这两个
import { BootstrapModalModule } from 'ngx-bootstrap-modal';
import { ModalModule } from 'ngx-bootstrap/modal';
import { AppComponent } from './app.component';
import { DetailComponent } from './detail/detail.component';
@NgModule({
 declarations: [
 AppComponent,
 DetailComponent
 ],
 imports: [
 BrowserModule,
 BootstrapModalModule
 ],
 providers: [],
 entryComponents: [
 DetailComponent
 ],
 bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html创建一个可以弹出模态框的按钮

<div class="container">
 <div class="row">
 <button type="button" class="btn btn-primary" (click)="showConfirm()">modal模态框</button>
 </div> 
</div>

app.component.ts编写这个按钮的动作showConfirm()

import { Component } from '@angular/core';
import { DialogService } from "ngx-bootstrap-modal";
import { ConfirmComponent } from './confirm/confirm.component'
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 title = 'app';
 constructor(public dialogService: DialogService,private modalService: BsModalService) {
 }
 showConfirm() {
  this.dialogService.addDialog(ConfirmComponent, {
   title: 'Confirmation',
   message: 'bla bla'
  })
   .subscribe((isConfirmed) => {
   });
 }
}

confirm.component.html编写confirm弹框的布局

<div class="modal-dialog">
 <div class="modal-content">
  <div class="modal-header">
   <button type="button" class="close" (click)="close()" >×</button>
   <h4 class="modal-title">{{title}}</h4>
  </div>
  <div class="modal-body">
   这是confirm弹框
  </div>
  <div class="modal-footer">
   <button type="button" class="btn btn-primary" (click)="close()">取消</button>
   <button type="button" class="btn btn-default">确定</button>
  </div>
 </div>
</div>

confirm.component.ts创建模态框组件

import { Component } from '@angular/core';
import { DialogComponent, DialogService } from 'ngx-bootstrap-modal';
export interface ConfirmModel {
 title:string;
 message:any;
}
@Component({
 selector: 'confirm',
 templateUrl: './confirm.component.html',
 styleUrls: ['./confirm.component.css']
})
export class ConfirmComponent extends DialogComponent<ConfirmModel, boolean> implements ConfirmModel {
 title: string;
 message: any;
 constructor(dialogService: DialogService) {
 super(dialogService);
 }
 confirm() {
 // on click on confirm button we set dialog result as true,
 // ten we can get dialog result from caller code
 this.close(true);
 }
 cancel() {
 this.close(false);
 }
}

3.内置弹框

(1)demo目录

--------app.component.ts

--------app.component.html
--------app.module.ts

(2)demo代码

内置弹框也包括 alert confirm prompt 三种形态,都有一些内置的样式

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BootstrapModalModule } from 'ngx-bootstrap-modal';
import { ModalModule } from 'ngx-bootstrap/modal';
import { AppComponent } from './app.component';
@NgModule({
 declarations: [
 AppComponent
 ],
 imports: [
 BrowserModule,
 BootstrapModalModule,
 ModalModule.forRoot()
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html很简单,就一个按钮

<div class="container">
 <div class="row">
 <button type="button" class="btn btn-default" (click)="show()">内置</button>
 </div> 
</div>

app.component.ts很简单,连组件的布局都不用写,传入一些参数比如图标icon,大小size等

import { Component } from '@angular/core';
import { DialogService, BuiltInOptions } from "ngx-bootstrap-modal";
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 title = 'app';
 constructor(public dialogService: DialogService) {
 }
 show(){
  this.dialogService.show(<BuiltInOptions>{
   content: '保存成功',
   icon: 'success',
   size: 'sm',
   showCancelButton: false
  })
 }
}

二、弹出方式二(此方法来自https://valor-software.com/ngx-bootstrap/#/modals)

还是跟上一种方法一样,先安装ngx-bootstrap-modal,然后导入bootstrap样式表

1.demo目录

--------app.component.ts
--------app.component.html
--------app.module.ts

2.demo代码

app.module.ts导入相应模块,并且注册它们

//app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ModalModule } from 'ngx-bootstrap/modal';
import { AppComponent } from './app.component';
@NgModule({
 declarations: [
 AppComponent
 ],
 imports: [
 BrowserModule,
 ModalModule.forRoot()
 ],
 providers: [],
 entryComponents: [
 ],
 bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component,TemplateRef } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/modal-options.class';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 title = 'app';
 public modalRef: BsModalRef;
 constructor(private modalService: BsModalService) {
 }
 showSecond(template: TemplateRef<any>){//传入的是一个组件
  this.modalRef = this.modalService.show(template,{class: 'modal-lg'});//在这里通过BsModalService里面的show方法把它显示出来
 };
}

app.component.html

<div class="container">
 <div class="row">
 <button type="button" class="btn btn-success" (click)="showSecond(Template)">第二种弹出方式</button>
 </div> 
</div>
<!--第二种弹出方法的组件-->
<template #Template>
 <div class="modal-header tips-modal-header">
 <h4 class="modal-title pull-left">第二种模态框</h4>
 <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
  <span aria-hidden="true">×</span>
 </button>
 </div>
 <div class="modal-body tips-modal-body">
 <div class="tips-contain"><span>第二种模态框弹出方式</span></div>
 </div>
 <div class="modal-footer">
  <button type="button" class="btn btn-default" (click)="modalRef.hide()">确定</button>
  <button type="button" class="btn btn-default" (click)="modalRef.hide()">取消</button>
 </div>
</template>

三、最终效果

我们将上面所有的弹框全部写在一起,然后效果就是这样的

Angular弹出模态框的两种方式

总结

以上所述是小编给大家介绍的Angular弹出模态框的两种方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js复制到剪切板的实例方法
Jun 28 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
Feb 23 Javascript
使用AngularJS 应用访问 Android 手机的图片库
Mar 24 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
Jun 05 Javascript
JS实现点击上移下移LI行数据的方法
Aug 05 Javascript
浅谈jQuery中ajaxPrefilter的应用
Aug 01 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
Dec 12 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
Mar 09 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
Sep 12 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
Sep 04 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
Jul 03 Javascript
五分钟搞懂Vuex实用知识(小结)
Aug 12 Javascript
vue使用axios跨域请求数据问题详解
Oct 18 #Javascript
JS实现按钮颜色切换效果
Sep 05 #Javascript
JS实现元素上下左右移动效果
Oct 18 #Javascript
JS去掉字符串中所有的逗号
Oct 18 #Javascript
vue实现长图垂直居上 vue实现短图垂直居中
Oct 18 #Javascript
vue router下的html5 history在iis服务器上的设置方法
Oct 18 #Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
Oct 18 #Javascript
You might like
一个程序下载的管理程序(一)
2006/10/09 PHP
php自定义错误处理用法实例
2015/03/20 PHP
PHP滚动日志的代码实现
2015/06/10 PHP
PHP实现的蚂蚁爬杆路径算法代码
2015/12/03 PHP
php实现的操作excel类详解
2016/01/15 PHP
Symfony2开发之控制器用法实例分析
2016/02/05 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
thinkphp5实现无限级分类
2019/02/18 PHP
让你的博文自动带上缩址的实现代码,方便发到微博客上
2010/12/28 Javascript
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
2014/02/19 Javascript
jquery做的一个简单的屏幕锁定提示框
2014/03/26 Javascript
javascript中的3种继承实现方法
2016/01/27 Javascript
js判断鼠标位置是否在某个div中的方法
2016/02/26 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
2016/05/27 Javascript
plupload+artdialog实现多平台上传文件
2016/07/19 Javascript
JavaScript 闭包机制详解及实例代码
2016/10/10 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
2016/12/02 Javascript
树结构之JavaScript
2017/01/24 Javascript
JavaScript表单验证实现代码
2017/05/22 Javascript
js排序与重组的实例讲解
2017/08/28 Javascript
简单实现jquery隔行变色
2017/11/09 jQuery
JS实现在线ps功能详解
2019/07/31 Javascript
微信小程序实现手势滑动卡片效果
2019/08/26 Javascript
Python 的 with 语句详解
2014/06/13 Python
解决matplotlib库show()方法不显示图片的问题
2018/05/24 Python
Python从数据库读取大量数据批量写入文件的方法
2018/12/10 Python
tensorflow 查看梯度方式
2020/02/04 Python
Python基于requests实现模拟上传文件
2020/04/21 Python
县政府领导班子四风问题对照检查材料思想汇报
2014/09/26 职场文书
房产协议书范本2014
2014/09/30 职场文书
承诺保证书格式
2015/02/28 职场文书
质检员工作总结2015
2015/04/25 职场文书
中学生勤俭节约倡议书
2015/04/29 职场文书
党员转正介绍人意见
2015/06/03 职场文书
妇联2016年六一国际儿童节活动总结
2016/04/06 职场文书