Hook ngOnDestroy v Angular

Hook ngOnDestroy se spustí při odstranění komponenty. V tomto hooku lze uvolnit prostředky, odstranit odběry událostí prvků, zastavit časovače atd.

Vytváření a odstraňování komponenty v Angular nastává, když je reaktivně zobrazována a skrývána pomocí podmínky if. To znamená, že Angular komponenty nejen skrývá, ale odstraňuje je a vrací zpět.

Komponenty jsou také vytvářeny a odstraňovány, když jsou reaktivně procházeny v cyklech. V tomto případě Angular také vytváří a odstraňuje komponenty.

Pojďme to vyzkoušet v praxi. Importujeme rozhraní OnDestroy:

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

Připojíme jej ke třídě:

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

A nyní napíšeme náš hook:

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