1

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

シナリオは、

  • Add ボタンを 5 回クリックします。これで、入力フィールドを含む 5 つの行が作成されます
  • 次に、送信ボタンをクリックすると、すべての入力値が警告されます。ここで、 @I​​nput/@Output を使用しようとしたが、実行できなかった問題。

プランカー

    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(){
    }
}

これについて私を助けてもらえますか？

どうぞよろしくお願いいたします。前もって感謝します。

4

1 に答える 1

1

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

export class AddRemoveDynamic {
    private 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);
    }

ワーキングプランカー

于 2016-07-03T06:02:10.633 に答える