javascript - 实例化几次@ViewChild，这样我就可以再次使用 HTML Angular 4

Question

我试图多次调用组件 HTML，但没有在父组件中再次包含子组件。

我需要它是这样的：

<father-component>
  <child-component #id>
  <button (click) = "#id.show()">
</father-component>

在我按下按钮之前，子组件中的 html 是隐藏的。

问题是我想在按下按钮时多次显示子组件的 html。

据我所知，@ViewChild 只实例化 html 一次，所以如果我尝试将该 html 附加到另一个 div，它将附加相同的内容。我需要知道是否有办法在我调用函数时实例化一个新的@ViewChild。

Answer 1

一种可能的解决方案是像这样使用 ngFor：

<father-component>
  <child-component *ngFor="let i of children">
  <button (click) = "increment()">
</father-component>

然后increment在您的组件类中有一个增加子级数量的方法。这将允许您拥有任意数量的子组件。