Как дублировать шаблон дочернего компонента внутри родителя при нажатии? (angular2)

Question

Мне интересно, можно ли нажать на кнопку, чтобы дублировать шаблон дочернего компонента внутри синтаксиса html родителя?

So;

<child-component></child-component> 

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

тогда, когда пользователь нажимает на '+' glyphicon и функцию onDuplicate() называется ,, родитель имеет:

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

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

и т.д. и т.п.

Я смотрел вокруг для способов сделать что-то подобное, но ничего не может найти, поэтому я не уверен, с чего начать. Я надеялся, что кто-то может указать мне в правильном направлении?

Благодаря

Answer 1

Вы можете использовать ngFor в родительском шаблоне с имуществом, определенным в родительском компоненте.

// Родитель 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

Одна идея состоит в том, чтобы иметь детей компоненты завернуты внутри *ngFor, то есть счетчик на реализации класса. Затем щелчок увеличит счетчик (исходный массив, фактически). Что-то вроде этого:

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

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

С класс, имеющий:

private childrenCounter: number[] = []; 

private onDuplicate(): void { 
    this.childrenCounter.push(0); // just add any element 
} 

Массив уродливое решение вместо простого счетчика, но до сих пор it is necessary.

Answer 3

Поместите свой в * ngFor директиву и в свою функцию onDuplicate() увеличьте цикл variabile (если у вас есть пользовательский объект, просто нажмите свой объект в массив).