在Angular中，经常有这样一种需求：当用户点击页面上某个元素以外的地方时，需要执行相应的操作。例如，当用户点击下拉菜单以外的地方时，需要隐藏下拉菜单。
本文将介绍如何在Angular中实现这种点击元素外部事件的处理，并提供详细的示例代码和解释。
方案1：使用 HostListener 监听整个页面的点击事件
我们可以通过 @HostListener 装饰器来监听整个页面的点击事件，然后判断点击的位置是否在指定的元素之外。如果是，则执行相应的操作。
-- -------------------- ---- -------
------ - ---------- ----------- ------- ------------- ------------ - ---- ----------------
------------
--------- ----------------
--
------ ----- --------------------- -
------------------- ------------ ----------- --
--------- ------------ - --- ---------------
------------------------------- ------------------
------ ---------------------- ----- ---- -
----- ------------- - -------------------------------------------------------
-- ---------------- -
-----------------------------
-
-
-在这个示例中，我们定义了一个名为 ClickOutsideDirective 的指令，它用于监控一个指定的HTML元素外部的点击事件。该指令中我们使用了 @HostListener 装饰器来监听整个页面的点击事件。当点击事件触发时，我们获取到当前点击的元素（targetElement），并使用 contains 方法来判断该元素是否在我们指定的元素内。
如果点击事件发生在指定元素外部，则会触发 clickOutside 事件，这个事件可以被父组件订阅，以便执行相应操作。
方案2：使用 Renderer2 监听指定元素的点击事件
除了监听整个页面的点击事件之外，我们还可以使用 Renderer2 来监听指定元素的点击事件。这种方法比方案1更加优化，因为它只监听了指定元素的点击事件，而不是整个页面的点击事件。
-- -------------------- ---- -------
------ - ---------- ----------- ------- ------------- ---------- ------- --------- - ---- ----------------
------------
--------- ----------------
--
------ ----- --------------------- ---------- ------- --------- -
------- -------------- ----
------------------- ------------ ----------- ------- ---------- ---------- --
--------- ------------ - --- ---------------
----------- ---- -
------------------ - --------------------------------- -------- ------- ----------- -- -
-- -------------------------------------------------------- -
-----------------------------
-
---
-
-------------- ---- -
---------------------------------
-
-在这个示例中，我们使用了 Renderer2 的 listen 方法来监听 document 元素上的 click 事件。当事件被触发时，我们检查 event.target 是否在指定元素内部，如果不在，则触发 clickOutside 事件。
需要注意的是，在使用 Renderer2 监听事件时，需要在销毁组件时手动取消订阅。
示例应用
接下来，我们将演示如何在Angular中使用 ClickOutsideDirective 指令。
首先，我们需要在我们的 AppModule 中导入 ClickOutsideDirective：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------ - ---- ------------------ ------ - --------------------- - ---- ---------------------------- ----------- -------- ---------------- ------------- -------------- ----------------------- ---------- -------------- -- ------ ----- --------- --
然后，在我们的组件模板中使用该指令即可：
<div class="dropdown" (clickOutside)="hideDropdown()">
<button (click)="toggleDropdown()">Toggle Dropdown</button>
<ul *ngIf="isDropdownVisible">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</div>在这个例子中，我们定义了一个 dropdown
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25419