Angular2如何通过编程方式删除组件。

Question

我有一个服务，它可以创建新的 blade 并将其保存在 blades 数组中。我使用“DynamicComponentLoader”来展示这个 blade。现在我想从另一个 blade 中删除我的 blade。但是我该怎么做呢？

- Алексей Серафимов

---

答案： https://dev59.com/3JLea4cB1Zd3GeqP46Rj - Алексей Серафимов

可能是重复的问题：如何在Angular2中销毁使用DynamicComponentLoader创建的所有组件？ - nycynik

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

- Günter Zöchbauer

---

谢谢，Günter Zöchbauer。但是这已经从DOM中删除了。例如，如果我在组件中有ngOnDestroy（），它不会执行。Angular不知道该组件已被删除。 - Алексей Серафимов

您可以使用“https://dev59.com/ZVsX5IYBdhLWcg3wNtPA”中描述的方法：即将`ComponentRef`的引用传递给创建的组件，然后调用其上的`dispose()`方法。 - BlueM

我在想，.remove() 是和 display: none 一样的，还是只是移除了呈现的元素？ - Mese

@Mese，“display: none”和“remove()”（现在是“destroy()”）完全不同。“display: none”仅限于CSS，只是使宿主元素不可见，并且可以通过例如设置“display: block”来使其可见，而“destroy()”则会销毁组件，从DOM中删除宿主元素，并且只能通过使用“ViewContainerRef.createComponent()”重新添加。 - Günter Zöchbauer