Hooken ngOnDestroy i Angular

Hooken ngOnDestroy utlöses när komponenten tas bort. I denna hook kan du frigöra resurser, ta bort prenumerationer på händelser från element, stoppa timers etc.

Skapande och borttagning av en komponent i Angular sker när den reaktivt visas och döljs med hjälp av villkoret if. Det vill säga, Angular döljer inte bara komponenter, utan tar bort dem och lägger tillbaka dem.

Komponenter skapas och tas även bort när de reaktivt itereras i loopar. I detta fall skapar och tar Angular bort komponenter.

Låt oss prova i praktiken. Importera gränssnittet OnDestroy:

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

Anslut den till klassen:

export class UserComponent implements OnDestroy {
	
}

Och nu skriver vi vår hook:

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

Gör en reaktiv if med hjälp av villkor som kommer att visa en underordnad komponent. Kontrollera att den studerade hooken fungerar.

I föräldrakomponenten finns en array med användarnamn. Skapa en underordnad komponent för användaren. Iterera arrayen med en loop och skriv ut komponenter med användare. Skapa en knapp som, när den klickas på, tar bort element från arrayen. Kontrollera att hooken för borttagning utlöses i de underordnade komponenterna.