Angular2 以编程方式删除组件。答案

【问题标题】：Angular2 remove component programmatically.Angular2 以编程方式删除组件。
【发布时间】：2016-05-26 13:11:30
【问题描述】：

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

【问题讨论】：

【解决方案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 不知道该组件已被删除。
@АлексейСерафимов：您可以使用stackoverflow.com/q/34093670/4715679 中描述的方法——即：将对ComponentRef 的引用传递给创建的组件并在其上调用dispose() 方法。
我想知道 .remove() 是否与 display: none 相同或只是删除渲染元素
@Mese display: none 和 remove()（现在是 destroy()）完全不同。 display: none 只是 CSS，只是使宿主元素不可见，并且可以通过例如设置 display: block 使其可见，而 destroy() 破坏组件，从 DOM 中删除宿主元素，并且只能通过使用重新添加ViewContainerRef.createComponent().