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:

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

Pripojíme ho k triede:

export class UserComponent implements OnDestroy {
	
}

A teraz napíšme náš hook:

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

Vytvorte reaktívny if pomocou ktorého sa bude zobrazovať podriadený komponent. Overte funkčnosť naučeného hooku.

V nadradenom komponente je dané pole mien používateľov. Vytvorte podriadený komponent pre používateľa. Prejdite pole cyklom a vypíšte komponenty s používateľmi. Vytvorte tlačidlo, po kliknutí na ktoré sa budú odstraňovať prvky z poľa. Overte, že v podriadených komponentoch sa bude spúšťať hook pri odstránení.