如何在悬停时保持动态弹出窗口显示

Question

我在 angular 中创建了一个动态弹出窗口，当我将鼠标悬停在跨度（或按钮）上时会出现，但当我离开该跨度时会消失。当我将鼠标悬停在弹出窗口上时，我无法弄清楚如何保持该弹出窗口显示。我猜一定是一些简单的解决方案（非常感谢任何帮助。

这是应用 https://stackblitz.com/edit/angular-khoagq

的 link

Answer 1

如果您不想在鼠标离开时隐藏弹出窗口，您需要删除 popup.directive 文件中的这部分代码：

 ngOnDestroy() {
    this.hideCallout();
  }



@HostListener('mouseleave')
  hideCallout() {
    if (this.calloutRef && !this.isClicked) {
     this.calloutRef.destroy();
     this.calloutRef = null;
    }
  }

Answer 2

万一有人感兴趣。我已经设法解决了这个问题。同时编辑了它 link https://stackblitz.com/edit/angular-khoagq / 我所做的： - 将弹出状态管理从指令移到组件； - 添加了包含动态组件的主机指令。我对这个解决方案仍然不满意。希望有更多可重用的东西，而不是将管理方法复制到我想要弹出窗口的每个组件。