クリック時に親の内部に子コンポーネントテンプレートを複製する方法は？ （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（）はループの変数をインクリメントします。