如何使用 ComponentRef 从内部销毁我的组件？

Posted 2023-02-19

【中文标题】如何使用 ComponentRef 从内部销毁我的组件？

【英文标题】：How can I use ComponentRef to destroy my Component from within?

【发布时间】：2018-01-27 05:01:40

【问题描述】：

我希望能够从内部销毁我的组件。 （不是来自父级，因为它是在多个区域中动态创建的）。

我从 angular 的 api 中得知他们有一个 ComponentRef 对象。我尝试将它包含在构造函数中，但它说它需要一个参数，我不确定要传递给它什么。

链接：https://angular.io/api/core/ComponentRef

如何在我的组件中使用 ComponentRef 来销毁它？

import  Component, ComponentRef, OnInit  '@angular/core';
export class MyComponent implements OnInit 
    constructor(private ref: ComponentRef) 

    ngOnInit() 
        this.ref.destroy()
    

【问题讨论】：

您不应该自己销毁组件。 Angular 会为您做到这一点。一个例外是您自己创建的组件。目的是什么？

我有一个非常精细的项目，它为动画目的创建了这个组件。该组件已经尝试将自己从路由中删除，尽管我担心在某些情况下可能会在没有路由指令的情况下创建它。在这种情况下，我希望让组件自行销毁..

如果你自己创建它，你可以自己销毁它。这也是<router-outlet> 所做的。示例见***.com/questions/36325212/…（或查看RouterOutlet 组件源）

是的，你可以阅读这篇文章Here is what you need to know about dynamic components in Angular了解componentRef在哪里使用

销毁触发器应该来自父级还是来自组件本身？

【参考方案1】：

我能想到的是，假设您在父级中有 destroy 方法，并使用事件发射器在这个子级中调用该方法。

【参考方案2】：

当您从另一个（父）组件实例化组件时，这很有用。

您可以尝试从组件对象this.ngOnDestroy() 调用 ngOnDestroy()。

如果您正在使用的 Angular 版本不允许，并且由于您想从同一个组件中销毁它，您需要要求父级使用输出和/或发射器来执行此操作。