Question

Hie ...我发现了一篇关于使用Dynamic Component Loader和Dispose Method添加和删除组件的帖子。我想破坏一次创建的组件。我有了demo和我找到演示Angular 2 - Adding / Removing components on the fly的来源...... 我知道我想将所有componentref存储在一个数组中，然后迭代它们并处理它......但我无法使它工作......请帮助我如何销毁所有组件。

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

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

Answer 1

执行您要求做的事情的最简单方法是在添加时跟踪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 } }删除它们。见updated plunk

dispose()

如果由于某种原因，您只需拨打DynamicComponent一次就非常重要，您可以创建一个＆＃34;容器＆＃34;，将您的DynamicComponentLoader添加为，然后处置容器，自动处理其子女。

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

说所有：如果有使用数据绑定的方法来执行您尝试做的事情，那么您应该优先于{ {1}}除非你有充分的理由不这样做。

我会第一个告诉你那里是需要DCL的用例，但在我（尽管是简短的）经验中，我最初认为需要它的每五个，我在给出一点思考之后，他们提出了至少三个数据绑定解决方案。

在这种情况下，这样做很简单 - 请参阅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创建的所有组件？

1 个答案: