多次实例化 @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>

然后在组件 class 中使用 increment 方法来增加 children 的数量。这将允许您拥有任意数量的 child 个组件。