在开始我们的blog之前，我们要先安装ngx-bootstrap-modal
不然我们的模态框效果会难看到你想吐
(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的一个构造函数的参数。
(1)demo目录
--------app.component.ts --------app.component.html --------app.module.ts --------confirm(文件夹) ------------confirm.component.ts ------------confirm.component.html
app.module.ts导入必要的BootstrapModalModule 和ModalModule ，再注册它们，这些都跟alert弹框一样，因为这些都是方法一的弹出方式
app.component.html创建一个可以弹出模态框的按钮
app.component.ts编写这个按钮的动作showConfirm()
confirm.component.html编写confirm弹框的布局
confirm.component.ts创建模态框组件
(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等
还是跟上一种方法一样，先安装ngx-bootstrap-modal，然后导入bootstrap样式表
1.demo目录
--------app.component.ts --------app.component.html --------app.module.ts
2.demo代码
app.module.ts导入相应模块，并且注册它们
app.component.ts
app.component.html
我们将上面所有的弹框全部写在一起，然后效果就是这样的
以上所述是小编给大家介绍的Angular弹出模态框的两种方式。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。