在前端开发中，我们经常需要处理用户和 UI 元素之间的交互。例如，弹出菜单、模态框等 UI 元素需要在用户点击其它区域时自动关闭。但 JavaScript 中没有自带的 “clickoutside” 事件处理方法。如果要实现这个功能，我们需要手动添加事件监听器，判断点击事件是否发生在 UI 元素的外部，然后再执行关闭等操作。这样的代码编写重复性高，不易维护。本文将介绍如何使用 npm 包 ng4-click-outside 来实现 “clickoutside” 功能。
ng4-click-outside 简介
ng4-click-outside 是一个 Angular / Ionic 2+ 应用程序的 npm 包，它提供了一个点击元素外部事件的源代码指令，可有效监听 DOM 元素的 “clickoutside” 事件。ng4-click-outside 支持响应式设计和键盘交互，并允许开发人员使用自己的 HTML 模板来自定义事件处理和包装器。
安装 ng4-click-outside
安装 ng4-click-outside 很简单，只需要在您的项目根目录中运行以下命令即可：
npm install ng4-click-outside
此命令将会下载并安装最新的 ng4-click-outside 版本。你可以在你的项目中直接使用这个包。
用 ng4-click-outside 实现 clickoutside
当我们需要关闭一个 UI 元素时，我们只需要检查是否发生了 “clickoutside” 事件即可。
使用 ng4-click-outside 的核心思路是：
- 在需要绑定 clickoutside 事件的元素上添加一个 Directive，并与一个响应事件进行绑定。
- 在响应事件中，将 UI 元素设置为“隐藏”或“关闭”等状态。
下面是一个示例，我们将使用 ng4-click-outside 实现在点击元素外部关闭菜单的功能。
<!-- my-menu.component.html -->
<nav #menu (clickOutside)="closeMenu()">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>-- -------------------- ---- -------
-- --------------------
------ - ---------- --------- - ---- ----------------
------ - -- ------------ ---- --------------------
------------
--------- --------------
------------ ---------------------------
--
------ ----- --------------- -
------------------ --------
------------- --
----------- -
---------------------------------------- - -------
-
-上面的代码中，我们在 nav 元素上绑定了点击外部事件，并指定了响应函数 closeMenu()。在 closeMenu() 函数中，我们设置了菜单元素的 display 样式为 'none'，这样就实现了在点击菜单外部关闭菜单的功能。
自定义事件
如果您想自定义处理事件，您可以使用 ng4-click-outside 中的 ClickOutsideConfig 对象。它允许您自定义事件处理方式，例如，通过 “Escape” 键关闭模态窗口。
-- -------------------- ---- -------
------ - ------------------ - ---- --------------------
----- --------------------- ------------------ - -
-------- -----------------------
-------- -----------------------------------------
---------------------- ---------------
------------------------ ------
---------- -----
--
-----------
------------- ------
-------- ------
---------- -
- -------- --------------------- --------- -------------------- --
--
---------- ---------------
--
------ ----- --------- --上面的代码中，我们将自定义 ClickOutsideConfig 对象传递给 Ng4ClickOutsideModule 模块的 CLICK_OUTSIDE_CONFIG 动态注入器。这么做可以让我们定制化自己的组件行为，并且为用户提供更好的交互体验。
总结
在本文中，我们学习了如何使用 npm 包 ng4-click-outside 实现 clickoutside 功能。NG4-click-outside 具有很高的灵活性，允许您自定义处理事件，并在项目中自由使用。希望本文能对您学习 ng4-click-outside 的使用有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005663781e8991b448e22b3