简介
ng-simple-modal 是一个基于 Angular 框架的 modal 插件，可在网页中快速创建各种弹窗，如信息提示窗、确认窗、输入数据窗等。这个插件功能简单但非常实用，可以大大方便前端工程师在开发中的窗口操作。本教程将详细讲解 ng-simple-modal 的使用方法。
安装
运行以下命令来在项目中安装 ng-simple-modal：
npm install ng-simple-modal
然后在 app.module.ts 中加入：
import {SimpleModalModule} from 'ng-simple-modal';
@NgModule({
imports: [SimpleModalModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }使用
打开一个 Modal
首先，需要在 component.ts 中定义一下 Modal 的内容，例如：
-- -------------------- ---- -------
------ ----------- ---- ----------------
------ ---------------------- ---- ------------------
------------
--------- ----------------
--------- -
---- ---------------------
----
-------
-----
------
---- -------------------
----------------
------
---- ---------------------
------- ---------- ------------ ------------------ -- ---------
------
-
--
------ ----- --------------------- ------- -------------------- -
------------- -
--------
-
-@Component 中 selector 可以随意定义，结构 template 中无非就是一个普通的 html 结构，三个区域分别为 header、body、footer。最后定义一个类，继承 SimpleModalComponent。
在 component.ts 中 import ModalExampleComponent，然后在模板最后加一个按钮：
<button (click)="myModal.open()">打开 Modal</button> <app-modal-example #myModal></app-modal-example>
注意到这里的 #myModal 是定义这个 modal-example 组件的引用名，也可以用 #xxx 引用 id 为 xxx 的模板。这里的 #myModal 是对应上面的 ngModel 实例。我们直接在点击事件响应方法中，调用 myModal.open() 即可打开 Modal。
添加数据到 Modal 中
我们可以向 modal 中插入数据。在打开 Modal 的时候，可以通过设置 modalOptions 对象来传递数据，例如：
const options: SimpleModalOptions = {
data: {
message: '这是一条消息'
}
}这里只是定义了一个 message 属性，实际使用中可以传递更多的数据。然后打开 Modal 的时候传入这个 options 对象：
<button (click)="openModal()">打开 Modal</button> <app-modal-example [modalOptions]="options" #myModal></app-modal-example>
这里的 [modalOptions] 是 Angular 的 input binding 语法，将 options 数据绑定到 #myModal 模板中的 modalOptions 变量。在 Modal 中，可以读取这个值并显示：
-- -------------------- ---- -------
------ ----------- ------ ---- ----------------
------ ---------------------- ------------------- ---- ------------------
------------
--------- ----------------
--------- -
---- ---------------------
----
-----------------------------
-----
------
---- -------------------
----------------
------
---- ---------------------
------- ---------- ------------ ------------------ -- ---------
------
-
--
------ ----- --------------------- ------- -------------------- -
-------- ------------- -------------------
------------- -
--------
-
-这里新增了 @Input() modalOptions 以接收 options 对象，并在模板中直接使用 modalOptions.data.message 即可读取。这里的 modalOptions 对象是 ng-simple-modal 内置的，直接复制即可使用。
传递参数
当 Modal 需要传递一个参数给打开它的组件时，例如一个确认窗口，触发后需要返回用户选择的值，可以使用下面的方法传递参数。
定义 Modal 组件的方法：
-- -------------------- ---- -------
------ ----- --------------------- ------- ------------------------------------------- -------- -
------------- -
--------
-
----------- -
----------- - -----
-------------
-
---------- -
----------- - ------
-------------
-
-这里泛型 <ModalConfirmComponent，boolean> 表示 Modal 打开后将返回一个 boolean 类型的值，可以根据情况自定义返回值类型。在 Modal 组件中实现 onConfirm 和 onCancel 两个方法，当用户点击确定或取消时将值设置为 true 或 false 并关闭 Modal。
调用 Modal 的时候传递一个需要获取结果的 Promise，如下所示：
-- -------------------- ---- -------
------------ -
--------------------------------------------- -
----- -
------ -------
-
----------------- -- -
-- --------- -
----------------- ------ ------
- ---- -
---------------- ---- ------
-
---
-在调用 Modal 的时候，通过 open 方法返回一个 Promise，之后拿到 Promise 的结果，根据结果进行后续操作。这里我们定义的是一个 openDialog 的方法，当这个方法被触发的时候，会打开 ModalConfirmComponent，把参数传入模板中，并返回 Promise。之后再根据 Promise 的结果执行后续操作。
效果
最终效果如下：
总结
ng-simple-modal 是一个简单但实用的组件，使用也不算太难。本文详细介绍了 ng-simple-modal 的使用方法，并讲解了传递参数的方法。如果你需要创建各种弹窗，使用这个组件一定会让你事半功倍，推荐使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600552de81e8991b448d0483