Angular2：包含Open ngbPopover图像延迟上悬停

Question

首先：我创建了一个plunkr以显示该问题：延迟上盘旋的元素http://plnkr.co/edit/5IhhqtofCvqqr5x9P0De?p=preview

我想打开一个ngbPopover（带图像）。 我使用(mouseover)和(mouseleave)结合triggers="manual"。在开幕式功能中，我使用setTimeout触发弹出窗口。一切正常，但不是在第一次执行。正如你在图片上看到的，popover被错误地放置。

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

Answer 1

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

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

有工作，围绕这一问题2种基本方式：

重新定位酥料饼后

• 已经加载了
• 给图像大小的前期。

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

我建议的是改为<img>元素的初始大小，因此当我们定位事物时，图像加载之前确切的尺寸是已知的。防爆。 width="200px" height="140px"像这样：

<ng-template #popContent let-greeting="greeting"> 
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ee/Crested_Tern_Tasmania_%28edit%29.jpg/1600px-Crested_Tern_Tasmania_%28edit%29.jpg" 
width="200px" 
height="140px"> 
</ng-template> 

随着图像的东西固定尺寸开始按预期工作：http://plnkr.co/edit/QUxBX1KCPVaAkIfBH0P8?p=preview