Angular 2 检查元素可见性

Question

如何检查元素(或组件)在屏幕上是否可见？

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

Answer 1

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

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

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

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

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