Hook ngOnDestroy v Angular

Hook ngOnDestroy sa spúšťa pri odstránení komponentu. V tomto hooku je možné uvoľniť zdroje, odstrániť odberateľov z udalostí elementov, zastaviť časovače atď.

Vytváranie a odstraňovanie komponentov v Angular prebieha, keď sú reaktívne zobrazované a skrývané pomocou podmienky if. To znamená, že Angular komponenty nielen skryje, ale odstráni ich a následne vráti späť.

Komponenty sú tiež vytvárané a odstraňované, keď sú reaktívne prechádzané v cykloch. V tomto prípade Angular tiež vytvára a odstraňuje komponenty.

Vyskúšajme si to v praxi. Importujeme rozhranie OnDestroy:

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

Pripojíme ho k triede:

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

A teraz napíšme náš hook:

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