如何在没有 ComponentFactory 的情况下销毁 Angular 2 组件？

Posted 2023-02-23

【中文标题】如何在没有 ComponentFactory 的情况下销毁 Angular 2 组件？

【英文标题】：How do you destroy an Angular 2 component without a ComponentFactory?

【发布时间】：2017-01-09 22:20:45

【问题描述】：

当通过 ComponentFactory 动态创建组件时，返回的 ComponentRef 提供了一个 destroy 方法，该方法非常适合我想要完成的工作。考虑到这一点，看起来我需要做的就是为静态创建的组件获取一个 ComponentRef，然后使用它的销毁函数（this answer 状态），但是当我尝试这个时，我得到一个错误，说“销毁不是函数”，即使我确实得到了一个对象。

这是我用于 ViewChild 的语法：

@ViewChild(MyComponent) myComponentRef: ComponentRef<MyComponent>;

还有我的“毁灭”号召：

private destroy() 
    this.myComponentRef.destroy();

这里触发：

<button (click)="destroy()">Destroy</button>

调用这个“销毁”方法适用于我动态创建的组件，但不是静态的。

编辑：所以看起来这确实部分删除了组件，但没有从 DOM 中删除，这与在动态创建的组件上调用“destroy”时发生的行为不同。此外，当我点击我试图销毁的组件时，我的点击事件函数仍然会触发。

编辑 2：我更新了 ViewChild 语法以显式读取 ComponentRef 并得到“未定义”返回：

@ViewChild(MyComponent, read: ComponentRef) myComponentRef: ComponentRef<MyComponent>;

如果返回“未定义”，那么我猜这可能是不可能的。

【问题讨论】：

你可以使用 *ngIf 指令动态删除组件吗？

这里是 Angular 组件生命周期钩子页面 angular.io/guide/lifecycle-hooks @badger2013 您使用哪些资源来查找有关 ComponentFactory 的文档？ medium.com/@Carmichaelize/… - 对我来说是新的。

利用angular.io/api/core/OnDestroy

【参考方案1】：

您可以在组件的容器中添加 *ngIf，并在条件 (ngif) 的基础中添加子元素的销毁和创建。示例：

在视图中：

<div *ngIf="destroy">
    <component-child></component-child>
</div>
<button (click)="destroyFunction()">Click to Destroy</button>

在组件父类中：

//Declare the view child
@ViewChild(componentChild) componentChild: componentChild;

//Declare the destroy variable
destroy:boolean;

//Add a function to change the value of destroy (boolean)
public destroyFunction()
    this.destroy = false;

执行这些步骤，您可以执行子元素的销毁。我希望它对你有效

【讨论】：

我添加了 *ngIf，而不是属性，我创建了一个方法，并且我的 ngIf 在我的组件标签上而不是 div 上。我的组件在 mat-tabs 中。切换选项卡时，我正在通过我的函数相应地设置 ngIf。但是当回到标签时，我可以看到旧的结果。似乎组件没有以这种方式被破坏。