2

特定のインデックスにコンポーネントを追加できません。たとえば、プランカーリンクの下。 PlunkerAddRemoveComponents

ここでは、初回のみ特定のインデックスにコンポーネントを追加できます。

export class AddRemoveDynamic {
    idx: number = 0;

    constructor(private _dcl: DynamicComponentLoader, private _e: ElementRef) { }

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

私のシナリオは次のとおりです。

  • [コンポーネントの追加] ボタンを 3 回クリックします。連続して 3 行作成されます。
  • 次に、2 行目の [追加] ボタンをクリックすると、別の行が作成されます。
  • 同じボタンをもう一度クリックすると、次の行にコンポーネントが作成されます

ここで、問題は、追加ボタン行の横に毎回コンポーネントを作成したいということです。

4

1 に答える 1

2

DynamicComponentLoader廃止されました。

ViewContainerRef.createComponent()要素を追加する必要がある場所にインデックスを追加できるようにする例を作成しました。

class DynamicCmp {
  _ref: ComponentRef;
  _idx: number;
  constructor(private resolver: ComponentResolver, private location:ViewContainerRef) { }
  remove() {
    this._ref.dispose();
  }
  add1() {
    this.resolver.resolveComponent(DynamicCmp).then((factory:ComponentFactory<any>) => {
      let ref = this.location.createComponent(factory, 0)
      ref.instance._ref = ref;
      ref.instance._idx = this._idx++;
    });
  }
}

プランカーの例

于 2016-06-28T09:05:26.603 に答える