Angular 2:动态添加特定/第n个位置的组件

时间:2016-06-28 08:38:22

标签: angular angular2-components

无法在特定索引处添加组件。例如,在plunker链接下方。     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行 连续地进行。
  • 然后点击第二行“添加”按钮,它将创建另一行。
  • 再次单击相同的按钮,它将创建下一个组件 行

在这里,问题是,我想在Add按钮行旁边每次创建组件。

1 个答案:

答案 0 :(得分: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++;
    });
  }
}

Plunker example