共享组件实例 - 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）看作灵感字体。