typescript 如何销毁在 angular2 中使用 DynamicComponentLoader 创建的所有组件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34585357/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to destroy all the Components created using DynamicComponentLoader in angular2?
提问by abhilash reddy
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 demoand the source where i found the demo Angular 2 - Adding / Removing components on the fly...
I know that i want to store all the componentrefin 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.
嘿...我找到了一篇关于使用动态组件加载器和处理方法添加和删除组件的帖子。我想一次性销毁所有创建的组件。我有 plunker演示和我在其中找到演示Angular 2 - 动态添加/删除组件的源代码......我知道我想将所有这些存储componentref在一个数组中，然后迭代它们并处理它......但我是无法使其工作...请帮助我如何销毁所有组件。
remove() {
this._ref.dispose();
}
this is how i destroy a single component...How to destroy all at once?
这就是我销毁单个组件的方式...如何一次销毁所有组件？
回答by drew moore
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
做你问怎么做的最简单的方法是在ComponentRef你添加它们时跟踪s 并dispose()在你想要删除它们时在循环中调用它们。查看更新的 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
}
}
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.
如果由于某种原因，您只调用dispose()一次非常重要 ，您可以创建一个“容器”，将您的DynamicComponents添加为它的子项，然后处理该容器，自动处理其子项。
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...
话虽如此，我无法想象我更愿意这样做而不是添加实现我上面概述的内容所需的四行代码的情况......
Having said allthat: 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 DynamicComponentLoaderunless you have a damn good reason not to.
说了这么多：如果有一种方法可以使用数据绑定来完成您想要做的事情，那么DynamicComponentLoader除非您有充分的理由不这样做，否则您应该支持它而不是退回。
I'll be the first to tell you there areuse-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.
我会是第一个告诉你那里是哪里需要DCL使用情况，但在我的（虽然短暂）的经验，每五个我最初以为需要它，我想出了后数据绑定至少有三个解决方案稍微考虑一下。
In this case, doing that was trivial - see other updated plunk:
在这种情况下，这样做很简单 - 请参阅其他更新的 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 = [];
}
}
