角度2 - 即时添加/删除组件 [英] Angular 2 - Adding / Removing components on the fly

问题描述

我需要能够添加&移动角度2组件。为此，我正在使用loadIntoLocation和处理方法，例如：

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

  this.m_loader.loadIntoLocation（MyComponent，this.m_element，'content'）然后（_componentRef => {
 
 //创建窗口并设置其标题：
 var component：MyComponent =（_componentRef.instance）; 
 component.ref = _componentRef; 
 
 //初始化组件内容
 }）; 
  

从组件中删除组件：

  this.ref.dispose（）; 
  

它几乎工作：
- 如果我添加一个组件，并关闭它，它工程
- 如果我添加了几个组件，他们工作
- 但是如果我添加组件A，然后删除它，然后添加组件B，似乎Angular给了我一个参考A，并保持一些旧值（我的组件是可拖动的，在这种情况下，B将被创建A当我销毁它时）

有没有办法正确地使角度破坏组件，或至少迫使它创造新的？

解决方案

正如蒂姆所建议的，

引用@ tbosch的评论

默认情况下，重复使用以前创建的DOM元素

所以为避免这种行为，您也可以使用 APP_VIEW_POOL_CAPACITY 并将其分配为$ code> 0 作为值引导程序（MyApp，[提供（APP_VIEW_POOL_CAPACITY，{useValue：0}）]）

更新

请注意，自从beta ＃5993 删除了 APP_VIEW_POOL_CAPACITY ，DOM正在重新正确。

I need to be able to add & remove angular 2 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();

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)

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

解决方案

As suggested by Tim,

quoting @tbosch's comment

Angular reuses previously created DOM elements by default

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

Update

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

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