Hook ngOnDestroy w Angularze

Hook ngOnDestroy jest wywoływany podczas usuwania komponentu. W tym hooku można zwolnić zasoby, usunąć subskrypcje na zdarzenia elementów, zatrzymać timery itp.

Tworzenie i usuwanie komponentu w Angularze ma miejsce, gdy jest on reaktywnie pokazywany i ukrywany za pomocą warunku if. To znaczy, że Angular nie tylko ukrywa komponenty, ale je usuwa i przywraca z powrotem.

Również komponenty są tworzone i usuwane, gdy są reaktywnie iterowane w pętlach. W tym przypadku Angular również tworzy i usuwa komponenty.

Sprawdźmy to w praktyce. Zaimportujmy interfejs OnDestroy:

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

Podłączmy go do klasy:

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

A teraz napiszmy nasz hook:

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