Az ngOnDestroy hook az Angular-ban

Az ngOnDestroy hook a komponens eltávolításakor aktiválódik. Ebben a hook-ban felszabadíthatod az erőforrásokat, leiratkozhatsz az elemek eseményeiről, leállíthatod az időzítőket stb.

Egy komponens létrehozása és eltávolítása az Angular-ban akkor történik, amikor az reaktívan megjelenik és elrejtődik egy if feltétel segítségével. Vagyis az Angular nem egyszerűen elrejti a komponenseket, hanem eltávolítja és visszaállítja őket.

A komponensek akkor is létrejönnek és semmisülnek meg, amikor azokat ciklusokban reaktívan iteráljuk. Ebben az esetben az Angular szintén létrehozza és eltávolítja a komponenseket.

Próbáljuk ki a gyakorlatban. Importáljuk az OnDestroy interfészt:

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

Kapcsoljuk össze az osztállyal:

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

És most írjuk meg a hook-unkat:

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