介绍
在Angular UI Bootstrap中，Popover是一种常见的UI组件，它可以显示一个类似于工具提示的弹出窗口。然而，当用户点击Popover以外的区域时，该Popover通常会仍然保持显示状态。本文将介绍如何在Angular应用中实现点击Popover以外的区域时，自动隐藏该Popover。
实现方法
我们可以通过监听document对象的mousedown事件来判断鼠标是否点击在了Popover以外的区域。如果是，则关闭Popover。
首先，在组件中添加一个变量来表示Popover是否正在显示：
------------- - ------
接下来，在Popover标签中添加popover-is-open属性，绑定到这个变量上：
------- --------------- ------- ------------------------------------- -----------
这样，每次Popover显示或隐藏时，都会更新popoverIsOpen变量的值。
然后，在组件中将document对象的mousedown事件监听器注册为一个方法：
---------- -
-------------------------------------- ---------------------------------
-
---------------------- ----------- -
-- ------------------- -- ------------------------------------------------------ -
------------------ - ------
------------------------
-
-在此方法中，我们首先检查popoverIsOpen变量是否为true，以确保Popover当前处于打开状态。接着，我们使用elementRef服务获取组件的nativeElement，即该组件在DOM中的元素节点。然后，我们使用contains方法检查鼠标点击的目标是否包含在该节点内部。如果不是，则说明用户已经在Popover以外的区域点击了一次鼠标，此时我们需要将popoverIsOpen变量设置为false，并且手动触发Angular的变更检测机制cd.detectChanges()。
最后，在组件销毁时，我们需要移除document对象的mousedown事件监听器：
------------- -
----------------------------------------- ---------------------------------
-示例代码
------- --------------- ------- ------------------------------------- -----------
------ - ---------- ----------- ------- ---------- ----------------- - ---- ----------------
------------
--------- --------------
------------ ---------------------------
---------- ---------------------------
--
------ ----- ---------------- ---------- ------- --------- -
------------- - ------
------------------- ----------- ----------- ------- --- ------------------ --
---------- -
-------------------------------------- ---------------------------------
-
---------------------- ----------- -
-- ------------------- -- ------------------------------------------------------ -
------------------ - ------
------------------------
-
-
------------- -
----------------------------------------- ---------------------------------
-
-结论
通过以上实现方法，我们可以让Popover在用户点击它以外的区域时自动隐藏。这提高了用户体验，并且让我们的应用更加友好。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/25469