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:

import { OnDestroy } from '@angular/core';

Kapcsoljuk össze az osztállyal:

export class UserComponent implements OnDestroy {
	
}

És most írjuk meg a hook-unkat:

export class UserComponent implements OnDestroy {
	constructor() {
		console.log('constructor is started');
	}
	
	ngOnDestroy() {
		console.log('onDestroy is applied');
	}
}

Készíts egy reaktív if-et, amellyel egy gyermek komponens jelenik meg. Ellenőrizd a tanult hook működését.

A szülő komponensben adott egy felhasználónevek tömbje. Készíts egy gyermek komponenst egy felhasználó számára. Iteráld végig a tömböt egy ciklussal és írd ki a felhasználókkal rendelkező komponenseket. Készíts egy gombot, amelyre kattintva a tömb elemei törlődnek. Ellenőrizd, hogy a gyermek komponensekben aktiválódik-e a törlés hook.