ngOnDestroy Hook i Angular

Hook'en ngOnDestroy udløses, når komponenten fjernes. I denne hook kan du frigøre ressourcer, fjerne abonnementer på elementhændelser, stoppe timere osv.

Oprettelse og sletning af en komponent i Angular sker, når den reaktivt vises og skjules ved hjælp af betingelsen if. Det betyder, at Angular ikke bare skjuler komponenter, men fjerner dem og bringer dem tilbage.

Komponenter oprettes og fjernes også, når de reaktivt itereres i loops. I dette tilfælde opretter og sletter Angular også komponenter.

Lad os prøve det i praksis. Importer grænsefladen OnDestroy:

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

Tilknyt den til klassen:

export class UserComponent implements OnDestroy {
	
}

Og lad os nu skrive vores hook:

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

Lav en reaktiv if, som vil vise en underordnet komponent. Test den studerede hooks funktion.

I den overordnede komponent er der givet en array af brugernavne. Lav en underordnet komponent til en bruger. Iterer arrayet med en løkke og vis komponenterne med brugerne. Lav en knap, der, når den klikkes på, vil slette elementer fra arrayet. Kontroller, at hook'en for sletning udløses i de underordnede komponenter.