Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

465
Vistas
Does ViewContainerRef.clear() remove component from memory?

When I create a component using ViewContainerRef and assign instance to a property of parent component, which is responsible for child component creation, do I need to set this property to null after I call ViewContainerRef.clear() if I want memory to be freed?

about 4 years ago · Santiago Trujillo
2 Respuestas
Responde la pregunta

0

No, if you assign parent component property to componentRef angular won't remove component from memory.

Angular only destroys component and removes its own references to this component. But reference to componentRef remains to live in your component property. So i would assign null to it. This way garbage collect will be able to clear memory

Plunker Example (add => clear => check)

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

See also

  • https://developer.mozilla.org/en/docs/Web/JavaScript/Memory_Management#Garbage_collection
about 4 years ago · Santiago Trujillo Denunciar

0

I am not 100% sure but Angular calls ngOnDestroy() method of dynamically created components when their parent component is removed by Router.

here is a 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 {}
about 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda