Angular2 以编程方式删除组件。

Posted 2023-02-23

【中文标题】Angular2 以编程方式删除组件。

【英文标题】：Angular2 remove component programmatically.

【发布时间】：2016-05-26 13:11:30

【问题描述】：

我有一项服务，它创建新刀片并将其保存在刀片阵列中。我使用“DynamicComponentLoader”展示了这个刀片。 现在我想从另一个刀片中删除我的刀片。但我怎么能做到这一点？

【问题讨论】：

答案：http://***.com/questions/34585357/how-to-destroy-all-the-components-created-using-dynamiccomponentloader-in-angula

How to destroy all the Components created using DynamicComponentLoader in angular2?的可能重复

【参考方案1】：

export class YourComponent 
  constructor(private ref:ElementRef) 

  someFunc() 
    elementRef.nativeElement.querySelector('some-elem').destroy();
  

你也可以使用包装元素

<div #wrapper><dynamic-component></dynamic-component>

然后使用

@ViewChild('wrapper') wrapper;
...
someFunc() 
  while (myNode.firstChild) 
    myNode.removeChild(myNode.firstChild);
  

【讨论】：

谢谢，君特·佐赫鲍尔。但这是从 DOM 中删除的。例如，如果我在组件中有 ngOnDestroy()，它不会执行。 Angular 不知道该组件已被删除。

@АлексейСерафимов：您可以使用***.com/q/34093670/4715679 中描述的方法——即：将对ComponentRef 的引用传递给创建的组件并在其上调用dispose() 方法。

我想知道 .remove() 是否与 display: none 相同或只是删除渲染元素

@Mese display: none 和 remove()（现在是 destroy()）完全不同。 display: none 只是 CSS，只是使宿主元素不可见，并且可以通过例如设置 display: block 使其可见，而 destroy() 破坏组件，从 DOM 中删除宿主元素，并且只能通过使用重新添加ViewContainerRef.createComponent().