即时添加/删除组件 [英] Adding / Removing components on the fly

问题描述

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

I need to be able to add & remove Angular components on the fly. To do so, I'm using loadIntoLocation and dispose methods, like it:

添加组件(从布局管理器):

Adding a component (from a layout manager):

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
});

移除一个组件(从组件中):

Removing a component (from the component):

this.ref.dispose();

它几乎可以工作了:- 如果我添加一个组件并关闭它，它就可以工作- 如果我添加几个组件，它们就可以工作- 但是如果我添加组件 A，然后删除它，然后添加组件 B，看起来 Angular 给了我对 A 的引用，并保留了一些旧值(我的组件是可拖动的，在这种情况下，B 将被创建 A 是当我摧毁它时)

It is nearly working: - if I add a component, and close it, it works - if I add several components, they work - but if I add component A, then remove it, then add component B, it seems like Angular gives me a reference to A, and keeps some old values (my components are draggable, and in this case the B will be created A was when I destroyed it)

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

Is there a way to make Angular destroy components properly, or at least to force it to create fresh ones?

推荐答案

按照 Tim 的建议，

As suggested by Tim,

引用@tbosch 的评论

quoting @tbosch's comment

Angular 默认重用之前创建的 DOM 元素

Angular reuses previously created DOM elements by default

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

So to avoid this behavior, taken from the comment as well, you can use APP_VIEW_POOL_CAPACITY and assign it 0 as value.

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

更新

请注意，由于 beta.1 APP_VIEW_POOL_CAPACITY 已被 #5993 和正在正确重新创建 DOM.

Update

Note that since beta.1 APP_VIEW_POOL_CAPACITY was removed by #5993 and the DOM is being recreated correctly.

这篇关于即时添加/删除组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！