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