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:

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

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

export class UserComponent implements OnDestroy {
	
}

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

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

Vytvořte reaktivní if pomocí kterého se bude zobrazovat podřízená komponenta. Ověřte funkčnost probraného hooku.

V nadřazené komponentě je dán pole jmen uživatelů. Vytvořte podřízenou komponentu pro uživatele. Projděte pole cyklem a vypište komponenty s uživateli. Vytvořte tlačítko, po jehož stisknutí se budou odstraňovat prvky z pole. Ověřte, že v podřízených komponentách se bude spouštět hook při odstranění.