角度完全破坏动态创建的组件

Question

我使用以下方法创建了许多动态组件：

this.factory = this.componentFactoryResolver.resolveComponentFactory(SliderComponent);
this.sliderComponentReference = viewContainerRef.createComponent(this.factory);

当我需要销毁组件时，我调用destroy方法：

this.sliderComponentReference.destroy();

我了解到它从视图及其实例中删除了动态组件，但是当我立即看到变量后仍然注意到以下信息时，便可以看到它：

changeDetectorRef: ViewRef_ {_view: {…}, _viewContainerRef: ViewContainerRef.. }
componentType:(...)
hostView: ViewRef_ {_view: {…}, _viewContainerRef: ViewContainerRef... }}
injector:(...)

问题：

1. 如果变量被销毁了，为什么变量仍然引用组件实例？

2. 组件是否仍存储在内存中？如果是这样，是否可以检索？

Answer 1

您可以在此处查看组件引用定义： https: //github.com/angular/angular/blob/master/packages/core/src/view/refs.ts#L103 - 它具有changeDetectorRef、hostView等属性。当您调用 时.destroy，它会调用底层viewRef.destroy方法：https://github.com/angular/angular/blob/master/packages/core/src/view/refs.ts#L277

这最终会调用其他方法，但它似乎实际上并没有覆盖组件引用上已经定义的任何属性。据我所知，在 JavaScript 中，对象无法删除自身。您只能删除引用该对象的对象的属性。

该组件仍然存储在内存中，并且在某种意义上仍然可以使用。然而，由于它的原因，它可能不会像你期望的那样工作.destroy。不过，您也许可以重新创建它......并且attach也有一些方法。JavaScript 执行自己的垃圾收集/内存管理，因此您无法真正强制将这些元素从内存中删除。如果 JavaScript 在垃圾收集周期中检测到 ref 不再可以被任何指针访问，它将释放该内存。