共享組件實例 - Angular 4

Question

我有一個名爲「popover」的組件，爲它顯示的內容創建一個黑色透明背景。它將自己附加到父元素的絕對位置。除此之外，它當您單擊之外

調整大小的DOM事件

和一些其他的東西很多事情

• 自行關閉。對於我的問題不是必需的。

因此，它基本上爲內容創建了這種樣式，並使用ng-content顯示您傳遞的任何內容;

使用範例

<popover [(show)]="true" [width]="200">YOUR CONTENT</popover>

展會默認爲false。父組件可以在需要顯示彈出窗口時將其動態設置爲true。

現在，我遇到了一種情況，我想要在*ngFor中使用此組件，該組件正在創建一個具有多列的結構，並且每行可以有3/4個元素使用此彈出窗口，並且行數可以繼續增長> 50.這意味着100個或更多的掛在其周圍的彈出物被隱藏起來。

我在想如果我可以創建一個共享的popover實例來使用它，因爲它本質上顯示了傳遞給它的內容（我不需要擔心它的定位 - 它被配置爲動態讀取父母的位置，並相應地附加到DOM）。所以這個想法只會創建1個實例，並且只要您懸停需要它的元素，此實例就會顯示內容。是否有可能做Angular4？

的想法是，以防止產生

Angular version I am using: 4.2.6 (latest)

感謝您的時間和精力。

Answer 1

如果我正確理解你的問題，你想要做的事情可以通過依賴注入來實現。 您可能想將角度對話材料（https://material.angular.io/components/dialog/overview）看作靈感字體。