Hooks ngOnDestroy v Angular

Hooks ngOnDestroy se sproži ob odstranitvi komponente. V tem hooku lahko sprostite vire, odstranite naročnino na dogodke elementov, ustavite časovnike itd.

Ustvarjanje in odstranjevanje komponente v Angular se zgodi, ko se reaktivno prikaže in skrije s pomočjo pogoja if. To pomeni, da Angular komponent ne samo skrije, ampak jih odstrani in vrne nazaj.

Prav tako se komponente ustvarijo in odstranijo, ko se reaktivno prebirajo v zankah. V tem primeru Angular prav tako ustvari in odstrani komponente.

Poskusimo v praksi. Uvozimo vmesnik OnDestroy:

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

Povežimo ga z razredom:

export class UserComponent implements OnDestroy {
	
}

In zdaj napišimo naš hooks:

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

Naredite reaktivni if s pomočjo katerega se bo prikazal podrejeni komponento. Preverite delovanje preučenega hooka.

V starševskem komponentu je dano polje imen uporabnikov. Naredite podrejeni komponent z uporabnikom. Preberite polje z zanko in izpišite komponente z uporabniki. Naredite gumb, ob kliku na katerega se bodo odstranili elementi iz polja. Preverite, da se bo v podrejenih komponentah sprožil hooks za odstranitev.