如何销毁在angular2中使用DynamicComponentLoader创建的所有组件？

嗨......我发现了一篇关于使用动态组件加载器和Dispose方法添加和删除组件的帖子.我想破坏一次创建的组件.我有plunker 演示和源代码我在其中找到了演示Angular 2 - 动态添加/删除组件 ...我知道我想将所有数据存储componentref在一个数组中然后迭代它们并处理它...但我是不能使它工作...请帮助我如何销毁所有组件.

     remove() {
    this._ref.dispose();
  }

这就是我如何摧毁一个组件......如何一次性摧毁所有组件？

执行您要求的操作的最简单方法是在ComponentRef添加它们时跟踪s,并dispose()在要删除它们时循环调用它们.请参阅更新的插件

export class App {
  ...
  private _children:ComponentRef[] = [];

  add() {
    this._dcl.loadIntoLocation(DynamicCmp, this._e, 'location').then((ref) => {
      ...
      this._children.push(ref);
    });
  }

  removeall(){
    this._children.forEach(cmp=>cmp.dispose());
    this._children = []; // not even necessary to get the components off the screen
  }
}

如果出于某种原因,你只需要拨打dispose()一次就非常重要 ,你可以创建一个"容器",添加你的DynamicComponents作为其子代,然后处理容器,自动处理它的子代.

话虽如此,我无法想象这样一种情况,我更愿意这样做,而不是添加实现上面概述的四行代码......

说了这么多:如果有一种方法可以使用数据绑定来做你想要做的事情,那么DynamicComponentLoader除非你有充分的理由不这样做,否则你应该支持这种做法.

我会是第一个告诉你那里是哪里需要DCL使用情况,但在我的(虽然短暂)的经验,每五个我最初以为需要它,我想出了后至少三个数据绑定解决方案给它一点想法.

在这种情况下,这样做是微不足道的 - 请参阅其他更新的插件:

@Component({
  selector: 'my-app',
  template : `
    Add new component
    Remove All
    
  `,
  directives:[DynamicCmp]
})
export class App {
  children:number[] = [];

  add() {
    this.children.push(this.children.length+1);
  }

  removeAll(){
    this.children = [];
  }

}