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

Question

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

我想在悬停元素时延迟打开 ngbPopover（带有图像）。我将 (mouseover) 和 (mouseleave) 与 triggers="manual" 结合使用。在打开函数中，我使用 setTimeout 触发弹出窗口打开。一切正常，但不是在第一次执行时。正如您在图片上看到的那样，弹出框放置错误。

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

Answer 1

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

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

有两种基本方法可以解决此问题：

重新定位弹出窗口在图像加载后
预先给图片一个尺寸。

图像加载后 重新定位弹出窗口的问题 是您必须收听 <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

Answer 2

尝试使用这个属性它是最简单和最干净的解决方案。基本上，触发器的默认值是点击。但是你是否可以将属性更改为 触发器="hover" 它会帮助你起来

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

Angular2: Open ngbPopover containing image delayed on hover

javascript

angular2-template

bootstrap-4

ng-bootstrap

angular