技术频道

公众号推荐

微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

Angular弹出模态框的两种方式

时间：2019-01-07分类：JavaScript作者：编程之家

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

rush:js;"> npm install ngx-bootstrap-modal --save

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

一、弹出方式一

(此方法来自)

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.component.html创建一个可以弹出模态框的按钮

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

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

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

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

T1 模态框返回值类型。

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

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.component.html创建一个可以弹出模态框的按钮

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

{ }); } }

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

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

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

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

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

{ content: '保存成功',icon: 'success',size: 'sm',showCancelButton: false }) } }

二、弹出方式二

(此方法来自 )

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

1.demo目录

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

2.demo代码

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

rush:js;"> //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 ],entryComponents: [ ],bootstrap: [AppComponent] }) export class AppModule { }

app.component.ts

rush:js;"> 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',styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app'; public modalRef: BsModalRef; constructor(private modalService: BsModalService) { } showSecond(template: TemplateRef){//传入的是一个组件 this.modalRef = this.modalService.show(template,{class: 'modal-lg'});//在这里通过BsModalService里面的show方法把它显示出来 }; }

app.component.html

rush:js;">