如何在点击中复制父级内的子组件模板？ （angular2）

Question

我想知道是否可以通过按钮点击在父html语法中复制子组件模板？

因此;

<child-component></child-component>

<span class="glyphicon glyphicon-plus" (click)="onDuplicate()"></span>

然后，一旦用户点击了＆＃39; +＆＃39; glyphicon和onDuplicate（）函数被调用，父母有：

 <child-component></child-component>
 <child-component></child-component>

 <span class="glyphicon glyphicon-plus" (click)="onDuplicate()"></span>

等等。

我一直在四处寻找做这样的事情的方法，但找不到任何东西，所以我不知道从哪里开始。我希望有人能指出我正确的方向？

由于

Answer 1

您可以在父模板中使用ngFor，并在父组件中定义属性。

// parent componet

public childItems: any[] = [];

public onDuplicate(){
  this.childItems.push(this.childItems.length);
}

//父模板

<child-component *ngFor="let child of childItems"></child-component>

<span class="glyphicon glyphicon-plus" (click)="onDuplicate()"></span>

Answer 2

一个想法是让子组件包含在Cannot infer type arguments for TreeMap<> 内，然后在类实现上有一个计数器。然后点击将增加计数器（实际上是源数组）。像这样：

*ngFor

课程有：

<div *ngFor="let cc of childrenCounter">
    <children-component></children-component>
</div>

<span class="glyphicon glyphicon-plus" (click)="onDuplicate()"></span>

数组是一个丑陋的解决方案而不是简单的计数器，但到目前为止it is necessary。

Answer 3

在你的* ngFor指令中使用你的函数onDuplicate（）增加循环变量（如果你有自定义对象只是将对象推入数组中）。