实例化几次@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方法来增加子代数。 那将允许您拥有任意数量的子组件。