Angular2：打开包含图像的ngbPopover在悬停时延迟

Question

首先：我创建了一个用于显示问题的plunkr：http://plnkr.co/edit/5IhhqtofCvqqr5x9P0De?p=preview

我希望在悬停元素时打开ngbPopover（带图片）。 我将(mouseover)和(mouseleave)与triggers="manual"结合使用。在开场功能中，我使用setTimeout来触发弹出窗口。一切正常，但不是第一次执行。正如你在图片中看到的那样，错误地放置了popover。

在第二，第三，......悬停一切正常。当我删除超时功能时，它也可以工作，但这不是我的目标。

Answer 1

所以，这是一个棘手的问题！在我建议解决之前（因为我不确定是否有“修复”它的方法），让我解释一下这里发生了什么。

为了正确定位元素，我们需要知道要定位的元素的精确大小。在您的特定情况下，确切的大小只有在浏览器加载图像后才知道。

有两种基本的解决方法：

• 在图像加载后重新定位popover
• 提前提供图片大小。

在图片加载后重新定位popover 的问题是您必须听取<img>的{​​{1}}事件，然后强制重新定位。这很麻烦，今天ng-bootstrap popover的实现没有任何强制重新定位的方法（尽管我们可以轻松添加一个！）。

我建议的是给出onload元素的初始大小，这样当我们定位事物时，在图像加载之前就知道了确切的尺寸。防爆。 <img>喜欢这样：

width="200px" height="140px"

使用图片的固定尺寸，事情开始按预期工作：http://plnkr.co/edit/QUxBX1KCPVaAkIfBH0P8?p=preview

Answer 2

尝试使用此属性 它是最简单，最干净的解决方案。 基本上，触发器的默认值是click。 但你是否可以将该财产改为 的触发= “悬停” 它会帮助你