Angular 2 - 销毁子组件

Posted 2023-02-23

【中文标题】Angular 2 - 销毁子组件

【英文标题】：Angular 2 - destroy child component

【发布时间】：2016-12-05 05:51:33

【问题描述】：

我从 Angular 2 开始，我初始化了一个子组件“ChildCmp”，在我需要通过单击销毁组件之后，可以说：

@Component(
selector: 'main-cmp',
templateUrl: './main-cmp.html',
directives: [ChildCmp]
)
class MainCmp 
    @ViewChild(ChildCmp)
    childCmp: ChildCmp;
    destroyChildClick()
        this.childCmp.destroy();
    

但是前面的代码没有运行，destroy() 是未定义的，异常是：

TypeError: this.childCmp.destroy 不是函数

我已阅读this thread 并且正在使用 ViewContainerRef.createComponent()，使用它创建的组件是 "ComponentRef" 的一个实例，但 childCmp 没有'没有“ComponentRef”实现。

如何实现或注入destroy方法？

谢谢大家！

【问题讨论】：

显示您在何处以及如何创建组件？

既然可以*ngIf，为什么要销毁？

@Harangue 我正在使用 ViewContainerRef.createComponent() 动态创建组件，其他组件是从模板创建的，因此我需要一个表单来销毁。

@micronyks，ChildCmp 没有什么特别之处，MainCmp 被传递给bootstrap 方法，我唯一想要的是在我销毁组件时触发事件（处理对象并避免内存泄漏）。

这样你就不能破坏它了。您可以销毁使用viewContainerRef.createComponent() 创建的组件的实例。所以再次询问您是如何创建它的？

【参考方案1】：

简答

export class MainCmp 

   @ViewChild(ChildCmp) childRef: ChildCmp;

   destroyClick() 
      this.childRef?.destroy();
   

我知道上面的代码在正常情况下没有意义，我不会使用它，但由于我没有上下文，我根据给定的问题回答。父级应该先检查子引用是否被定义，然后才能销毁子引用。

更好的方法是使用NgIf 来销毁子组件，但我还是不知道上下文或用例。

@Component(
  selector: 'main-cmp',
  template: `
    <child-cmp *ngIf="childDestroyed"></child-cmp>
    <button (click)="childDestroyed = true">Destroy child</button>
  `,
)
class MainCmp 
  childDestroyed: boolean;

【讨论】：

这没有意义。

我认为这不能回答 OP 的问题。另外，这里写的对我来说没有意义。无论如何，当父组件被销毁时，子组件也会被销毁。无论this.childRef.destroy() 是否有效，您基本上都是在呼吁在孩子被销毁之前将其销毁。

@freethebees 没有人说你需要手动销毁孩子，但人们可能想为这么多不同的用例销毁孩子。如果你想保留父母并摧毁孩子怎么办？

@MurhafSousli OP 要求手动销毁孩子：“通过单击销毁组件”。如果您暗示您的代码允许您保留父母并摧毁孩子，我不同意。仅当 MainCmp 被销毁时，您的代码才会运行 this.childRef.destroy()。

我刚刚将ngOnDestroy()重命名为destroyClick()，重要的是如何从组件代码中手动销毁它