共享组件实例 - Angular 4

Question

我有一个名为“popover”的组件，它为显示的内容创建一个黑色透明背景。它将自身附加到具有父元素绝对位置的DOM。除此之外，它做了很多事情

当您点击外面
• 时，
• 会自行关闭
• 调整dom事件
• 以及其他一些事情......对我的问题不是必不可少的。

因此，它基本上为内容创建了这种样式，并使用ng-content显示您在其中传递的任何内容;

样本用法

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

该节目默认为false。然后，父组件可以在需要显示弹出窗口时将其动态设置为true。

现在，我遇到了一种情况，我希望在*ngFor中使用这个组件，这个组件创建一个具有多个列的结构表，并且每行可以使用此弹出框和数字具有3/4个元素行可以继续增长＆gt; 50.这意味着隐藏着100个或更多的宿舍。

我在想的是，如果我可以创建一个这个popover的共享实例，因为它实际上显示了传递给它的内容（我不需要担心它的定位 - 它被配置为动态读取父项位置并相应地附加到DOM）。所以这个想法只会创建一个实例，只要你将一个元素悬停在需要它的元素上，这个实例就会显示内容。是否有可能成为Angular4？

想法是阻止创作

Angular version I am using: 4.2.6 (latest)

感谢您的时间和精力。

Answer 1

如果我理解你的问题，可以利用依赖注入来实现你想要做的事情。 您可能想要将Angular Material的对话框（https://material.angular.io/components/dialog/overview）看作灵感的字体。