即时添加/删除组件

Question

我需要能够即时添加和删除 Angular 组件。为此，我使用了 loadIntoLocation 和 dispose 方法，例如：

添加组件（来自布局管理器）：

this.m_loader.loadIntoLocation(MyComponent, this.m_element, 'content').then(_componentRef => {

    // Create the window and set its title:
    var component: MyComponent = (_componentRef.instance);
    component.ref = _componentRef;

    // init the component content
});

正在删除组件（从组件中）：

this.ref.dispose();

快要工作了： - 如果我添加一个组件，然后关闭它，它就可以工作 - 如果我添加几个组件，它们就可以工作 - 但如果我添加组件 A，然后删除它，然后添加组件 B，似乎 Angular 给我一个对 A 的引用，并保留一些旧值（我的组件是可拖动的，在这种情况下 B 将是在我销毁它的时候创建的）

有没有办法让 Angular 正确销毁组件，或者至少强制它创建新组件？

Answer 1

根据蒂姆的建议，

引用@tbosch 的 comment

Angular reuses previously created DOM elements by default

因此，为了避免这种行为，也从评论中获取，您可以使用 APP_VIEW_POOL_CAPACITY 并将其分配为 0 作为值。

bootstrap(MyApp, [provide(APP_VIEW_POOL_CAPACITY, {useValue: 0})])

更新

请注意，由于 beta.1 APP_VIEW_POOL_CAPACITY 已被 #5993 删除并且 DOM 正在正确重新创建。

即时添加/删除组件

Adding / Removing components on the fly

components

dispose

dynamic

angular

更新