我使用以下方法创建了许多动态组件:
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:(...)
问题:
你可以在这里看到组件引用定义: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
这最终会调用其他方法,但它似乎并没有覆盖已在组件ref上定义的任何属性。据我所知,在JavaScript中,对象无法自行删除。您只能通过引用该对象来删除对象的属性。
该组件仍然存储在内存中,在某种意义上它仍然可用。但是,由于.destroy
的作用,它可能无法正常工作。你也许可以重新创建它......而且还有attach
方法。 JavaScript执行自己的垃圾收集/内存管理,因此您无法真正强制从内存中删除这些元素。如果JavaScript在垃圾收集周期中检测到任何指针不再可以访问ref,它将释放该内存。