ngOnDestroy Hook i Angular

Hooken ngOnDestroy utløses når komponenten fjernes. I denne hooken kan du frigjøre ressurser, fjerne abonnementer på elementhendelser, stoppe timere osv.

Opprettelse og sletting av en komponent i Angular skjer når den reaktivt vises og skjules ved hjelp av betingelsen if. Det vil si at Angular ikke bare skjuler komponenter, men fjerner dem og henter dem tilbake.

Komponenter opprettes og fjernes også når de reaktivt itereres i løkker. I dette tilfellet oppretter og fjerner Angular også komponenter.

La oss prøve i praksis. Importer grensesnittet OnDestroy:

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

Koble det til klassen:

export class UserComponent implements OnDestroy {
	
}

Og la oss skrive hooken vår:

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

Lag en reaktiv if som viser en barnekomponent. Sjekk at den lærte hooken fungerer.

I foreldrekomponenten er det gitt en array med brukernavn. Lag en barnekomponent for en bruker. Iterer arrayet med en løkke og vis komponentene med brukerne. Lag en knapp som, når den klikkes, sletter elementer fra arrayet. Sjekk at hooken for sletting utløses i barnekomponentene.