angular - 如何在悬停时保持动态弹出显示

Question

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

这是应用程序的链接 https://stackblitz.com/edit/angular-khoagq

Answer 1

如果您不想在 mouseleave 上隐藏弹出窗口，则需要删除 popup.directive 文件中的这部分代码：

 ngOnDestroy() {
    this.hideCallout();
  }



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

Answer 2

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