Die ngOnDestroy-hook in Angular

Die hook ngOnDestroy aktiveer wanneer die komponent verwyder word. In hierdie hook kan jy hulpbronne vrystel, intekening op elementgebeurtenisse kanselleer, timers stop en so meer.

Die skepping en vernietiging van 'n komponent in Angular gebeur wanneer dit reaktief vertoon en weggesteek word deur 'n if voorwaarde. Dit beteken Angular versteek nie net komponente nie, maar verwyder hulle en bring hulle weer terug.

Komponente word ook geskep en verwyder wanneer hulle reaktief deur lusse herhaal word. In hierdie geval skep en verwyder Angular ook komponente.

Kom ons probeer dit prakties. Laat ons die koppelvlak OnDestroy invoer:

app/user/user.component.tsimport { OnDestroy } from '@angular/core';

Laat ons dit by die klas koppel:

app/user/user.component.tsexport class UserComponent implements OnDestroy {
  
}

En nou skryf ons ons hook:

app/user/user.component.tsexport class UserComponent implements OnDestroy {
  constructor() {
    console.log('constructor is started');
  }
  
  ngOnDestroy() {
    console.log('onDestroy is applied');
  }
}