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

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上对其进行了编辑/我已经完成了：-将弹出状态管理从指令移到了组件； -添加了包含动态组件的主机指令。我仍然对这种解决方案不满意。希望有更多可重用的方法，而不是将管理方法复制到我要弹出的每个组件中。