角2：動的コンポーネントを使用すると、入力ボタンをクリックしながらすべての入力値を他のコンポーネントに渡します。

Question

いくつかの入力フィールドを持つ複数の動的コンポーネントを作成しました。今、Submitボタンをクリックしながら、すべての入力値を他のコンポーネントに送信したいと思います。

シナリオは

• が5回に追加]ボタンをクリックし、です。今度は、入力フィールドが5行作成されます
• 次に、送信ボタンをクリックすると、すべての入力値が警告されます。ここでは、@ Input/@ Outputを使用しようとしたときの問題ですが、実行することができませんでした。

Plunker

import { Component, ViewContainerRef, ElementRef, ComponentRef, ComponentResolver, ViewChild } from '@angular/core'; 

@Component({ 
    template: ` 
    <div id=item{{_idx}} style="border: 1px solid red">Test Component 
     <input type="text"/> 
     <button (click)="remove()">Remove</button> 
     <button (click)="add1()">Add</button> 
    </div>` 
}) 
class DynamicCmp { 
    _ref: ComponentRef; 
    _idx: number; 
    constructor(private resolver: ComponentResolver, private location:ViewContainerRef) { } 
    remove() { 
     this._ref.destroy(); 
    } 
    add1() { 

    this.resolver.resolveComponent(DynamicCmp).then((factory:ComponentFactory<any>) => { 
     let ref = this.location.createComponent(factory, 0); 
//  this._dcl.loadNextToLocation(DynamicCmp, this._e).then((ref) => { 
      ref.instance._ref = ref; 
      ref.instance._idx = this._idx++; 
     }); 
    } 
} 


@Component({ 
    selector: 'my-app', 
    template: ` 
<button (click) = "add()" > Add new component </button > 
<button (click) = "submit()" > Submit </button > 
<button (click) = "removeall()" > Remove All </button > 
<div class="ttt11" id="ttt" #location ></div> 
`  
}) 
export class AddRemoveDynamic { 
    idx: number = 0; 

    @ViewChild('location', {read: ViewContainerRef}) location:ViewContainerRef; 

    constructor(private resolver: ComponentResolver) { } 

    add() { 
    this.resolver.resolveComponent(DynamicCmp).then((factory:ComponentFactory<any>) => { 
     let ref = this.location.createComponent(factory) 

//  this._dcl.loadIntoLocation(DynamicCmp, this._e, 'location').then((ref) => { 
      ref.instance._ref = ref; 
      ref.instance._idx = this.idx++; 
     }); 
    } 

    submit(){ 
    } 
} 

あなたは、この上で私を助けていただけますか？

多くの方に感謝します。 ありがとうございました。

Answer 1

親コンポーネントで作成した動的コンポーネントを追跡する必要があります。あなたが新しいコンポーネントを作成するときに

export class AddRemoveDynamic { 
    private components = []; 

はその後、ちょうどcomponents配列を横断し、抽出提出する際最後に、それは入力値のコンポーネントの配列

add() { 
    this.resolver.resolveComponent(DynamicCmp).then((factory:ComponentFactory<any>) => { 
     let ref = this.location.createComponent(factory) 

//  this._dcl.loadIntoLocation(DynamicCmp, this._e, 'location').then((ref) => { 
      ref.instance._ref = ref; 
      ref.instance._idx = this.idx++; 
      this.components.push(ref); 
     }); 
    } 

にそのコンポーネントの参照を押してください。

submit(a: any){ 
     let componentThings = this.components.map((compRef) => compRef.instance.thing); 
     alert(componentThings); 
    } 

Working plunker