Hooks ngOnDestroy v Angular

Hooks ngOnDestroy se sproži ob odstranitvi komponente. V tem hooku lahko sprostite vire, odstranite naročnino na dogodke elementov, ustavite časovnike itd.

Ustvarjanje in odstranjevanje komponente v Angular se zgodi, ko se reaktivno prikaže in skrije s pomočjo pogoja if. To pomeni, da Angular komponent ne samo skrije, ampak jih odstrani in vrne nazaj.

Prav tako se komponente ustvarijo in odstranijo, ko se reaktivno prebirajo v zankah. V tem primeru Angular prav tako ustvari in odstrani komponente.

Poskusimo v praksi. Uvozimo vmesnik OnDestroy:

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

Povežimo ga z razredom:

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

In zdaj napišimo naš hooks:

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