Angular 完全销毁动态创建的组件

Angular Destroying a dynamically created component completely

我使用以下方法创建了很多动态组件:

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. 组件是否仍然存储在内存中?如果可以,是否可以检索?

您可以在此处查看组件引用定义:https://github.com/angular/angular/blob/master/packages/core/src/view/refs.ts#L103 -- it has the changeDetectorRef, hostView, etc. properties. When you call .destroy, it calls the underlying viewRef.destroy method: https://github.com/angular/angular/blob/master/packages/core/src/view/refs.ts#L277

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

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