如何摧毁angular2使用DynamicComponentLoader创建的所有组件？ [英] How to destroy all the Components created using DynamicComponentLoader in angular2?

问题描述

枝...我发现关于添加和使用动态组件加载和Dispose方法组件移除一个职位。我要摧毁创建一次全部组件。我有plunker 演示并在那里我找到了演示<一个源href=\"http://stackoverflow.com/questions/34093670/angular-2-adding-removing-components-on-the-fly/34134651\">Angular 2 - 添加/飞删除组件...
我知道我要来存储所有的 componentref 在一个数组，然后遍历它们并处理它...但我不能让它工作...请帮助我如何摧毁所有的组件。

Hie...I found a post regarding Adding and removing of components using Dynamic Component Loader and Dispose Method. I want to destroy the components created all at once. I have the plunker demo and the source where i found the demo Angular 2 - Adding / Removing components on the fly ... I know that i want to store all the componentref in an array then iterate them and dispose it...But i am not able to make it work...Please help me how to destroy all the components.

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

这是我如何摧毁一个单一组分...如何销毁所有一次？

this is how i destroy a single component...How to destroy all at once?

推荐答案

做什么你问怎么做是跟踪的最简单方式 ComponentRef 参考译文]你添加它们，并调用当你想删除它们处理掉（）每一个循环。请参见更新普拉克

The simplest way to do what you're asking how to do is to keep track of the ComponentRefs as you add them and call dispose() on each in a loop when you want to remove them. See updated plunk

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（）键，你可以创建一个容器，添加 DynamicComponent 取值为孩子，然后配置容器，自动处理其子。

If for some reason it's super important that you only call dispose() once, you could create a "container", add your DynamicComponents as children of that, and then dispose the container, automatically disposing its children.

说了这么多，我不能想象一个情况我想preFER这样做增加了$ C $的四行C时需实现我上面所述...

Having said that, I can't imagine a situation where I'd prefer doing that over adding the four lines of code it takes to implement what I outlined above...

说到的所有的是：如果有使用数据绑定做你想要做什么办法，你应该赞成，超过回落对 DynamicComponentLoader 除非你有一个该死的好理由不这么做。

Having said all that: If there's a way to use data binding to do what you're trying to do, you should favor that over falling back on DynamicComponentLoader unless you have a damn good reason not to.

我会是第一个告诉你那里的是的在需要DCL使用情况，但在我的（尽管是短暂的）的经验，每五我最初以为需要它，我想出了用给它一点点思索后至少有三个数据绑定解决方案。

I'll be the first to tell you there are use-cases where DCL is needed, but in my (albeit brief) experience, for every five I initially thought needed it, I came up with data-binding solutions for at least three after giving it a little thought.

在这种情况下，这样做是微不足道的 - 见其他更新普拉克

In this case, doing that was trivial - see other updated plunk:

@Component({
  selector: 'my-app',
  template : `
    <button (click)="add()">Add new component</button>
    <button (click)="removeAll()">Remove All</button>
    <template ngFor #child [ngForOf]="children">
       <div [dynamicCmp]="child"></div>
    </template>
  `,
  directives:[DynamicCmp]
})
export class App {
  children:number[] = [];

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

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

}

这篇关于如何摧毁angular2使用DynamicComponentLoader创建的所有组件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！