Angular 2 检查元素可见性

Posted 2023-02-22

【中文标题】Angular 2 检查元素可见性

【英文标题】：Angular 2 check element visibility

【发布时间】：2017-02-28 00:04:09

【问题描述】：

如何检查某个元素（或组件）是否在屏幕上可见？

在特定情况下，我在引导下拉列表中有一个组件，并且我希望我的组件仅在下拉列表打开时才执行某些操作（但我不想使用对下拉项的引用）。

【参考方案1】：

如果你还没有，我会使用 ng-bootstrap，特别是 NgbDropdown 组件。

https://ng-bootstrap.github.io/#/components/dropdown

它有一个 openChange 事件，在菜单打开或关闭时触发，您可以监听该事件并触发您自己的逻辑。

它还有一个 isOpen 方法，你可以检查菜单是否打开。

如果这些选项不起作用，您可以禁用下拉按钮本身，并创建您自己的按钮来切换下拉菜单并使用手动触发器打开菜单并启动您的自定义逻辑，并停止您的逻辑并关闭菜单，但要小心使看起来标准的界面元素表现得怪异，因为这会使用户感到困惑。