在前端开发中，既有需求要在点击页面中某个特定区域以外的地方时关闭模态框，这时就可以使用 npm 包 angular2-off-click。
下面是本教程的目录：
- 安装
- 使用
- 示例代码
安装
在 Angular 项目的根目录下，使用命令行进行 npm 包安装：
npm install angular2-off-click --save
使用
在 AppModule 中需要引入 OffClickModule 并添加到 imports 数组中。
-- -------------------- ---- -------
-- -------------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - -------------- - ---- ---------------------
-----------
-------- -
--------------
--------------
--
------------- - ------------ --
---------- - ------------ -
--
------ ----- --------- - -之后，可以用 ngOffClick 指令来为一个元素添加点击非此元素区域时的功能。在 ngOffClick 指令中，使用变量来保存响应点击方法的函数。
<!-- app.component.html --> <button (click)="showModal()">Show Modal</button> <div class="modal" *ngIf="isModalOpen" ngOffClick (ngOffClick)="closeModal()"> <h1>Modal Content</h1> </div>
在上面的代码中，定义了一个按钮和一个模态框。模态框使用了 ngOffClick 指令，并且在点击模态框以外的区域时执行了 closeModal() 方法。
示例代码
以下是完整的示例代码：
-- -------------------- ---- -------
-- ----------------
------ - --------- - ---- ----------------
------------
--------- -----------
------------ ----------------------
--
------ ----- ------------ -
------------ ------- - ------
----------- -
---------------- - -----
-
------------ -
---------------- - ------
-
-<!-- app.component.html --> <button (click)="showModal()">Show Modal</button> <div class="modal" *ngIf="isModalOpen" ngOffClick (ngOffClick)="closeModal()"> <h1>Modal Content</h1> </div>
以上代码中，点击「Show Modal」按钮可以展示模态框。在点击模态框以外的区域时，模态框自动关闭。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005548681e8991b448d1ca5