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

Question

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

这是我为 ViewChild 使用的语法:

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

还有我的“销毁”调用:

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

这里触发:

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

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

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

编辑 2:我更新了我的 ViewChild 语法以显式读取 ComponentRef，然后返回“undefined”:

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

如果返回“undefined”那么我猜这可能是不可能的。

Answer 1

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

在 View 中:

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

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