Cuando creo un componente usando ViewContainerRef y asigno una instancia a una propiedad del componente principal, que es responsable de la creación del componente secundario, ¿debo establecer esta propiedad en null después de llamar a ViewContainerRef.clear() si quiero que se libere la memoria?
No, si asigna la propiedad del componente principal a componentRef , angular no eliminará el componente de la memoria.
Angular solo destruye el componente y elimina sus propias referencias a este componente. Pero la referencia a componentRef permanece para vivir en la propiedad de su componente. Así que le asignaría null . De esta manera, la recolección de basura podrá borrar la memoria
Ejemplo de Plunker (agregar => borrar => verificar)
@Component({ selector: 'my-app', template: ` <div> <button (click)="addComponent()">Add component</button> <div #container></div> <button (click)="clear()">Clear</button> <button (click)="check()">check</button> </div> `, }) export class App { comp: ComponentRef<DynamicComponent>; constructor( private vcRef: ViewContainerRef, private resolver: ComponentFactoryResolver) {} addComponent() { let factory = this.resolver.resolveComponentFactory(DynamicComponent); this.comp = this.vcRef.createComponent(factory); } clear() { this.vcRef.clear(); } check() { alert(this.comp); } }Ver también
No estoy 100% seguro, pero Angular llama al método ngOnDestroy() de componentes creados dinámicamente cuando el enrutador elimina su componente principal.
aquí hay un plunker: https://plnkr.co/edit/rAX6745xZi6EvP8N78IL?p=preview
import {Component, NgModule,Injector, ComponentFactoryResolver, TemplateRef, ViewChild, ViewContainerRef} from '@angular/core' import {BrowserModule} from '@angular/platform-browser' import {Routes, RouterModule, Route} from '@angular/router'; @Component({ selector: 'my-other', template: `<div>other</div>` }) export class Other {} @Component({ selector: 'my-cmp', template: `<div> my cmp <ng-content></ng-content> </div> ` }) export class MyComp { ngOnDestroy() { console.log('dynamic component ngOnDestroy is called'); } } @Component({ selector: 'my-app', template: ` <a routerLink="/viewchild">go viewchild</a> <a routerLink="/other">go other</a> <div> <router-outlet></router-outlet> </div> ` }) export class App {} @Component({ selector: 'my-prt', template: ` <div> <button (click)="create()">Create</button> <div #vc> <my-cmp>static one</my-cmp> </div> </div> `, }) export class Parent { @ViewChild('vc', {read: ViewContainerRef}) vc: ViewContainerRef; cmpRef = []; constructor(private injector: Injector, private componentFactoryResolver: ComponentFactoryResolver) { } create() { const projectableNodes = [[document.createTextNode('a'), document.createTextNode('b')]]; const factory = this.componentFactoryResolver.resolveComponentFactory(MyComp); this.cmpRef.push(this.vc.createComponent(factory, this.injector, undefined, projectableNodes); } ngOnDestroy() { //this.cmpRef.forEach(ref=>ref=null); } } let routes = [ {path:'viewchild', component: Parent}, {path:'other', component: Other} ]; @NgModule({ imports: [ BrowserModule, RouterModule.forRoot(routes ], declarations: [ App, MyComp, Parent, Other ], entryComponents: [MyComp], bootstrap: [ App ] }) export class AppModule {}