ngOnDestroy-Hook in Angular

Der Hook ngOnDestroy wird ausgelöst, wenn die Komponente entfernt wird. In diesem Hook können Ressourcen freigegeben, Abonnements von Elementereignissen entfernt und Timer gelöscht werden usw.

Das Erstellen und Entfernen einer Komponente in Angular erfolgt, wenn sie reaktiv angezeigt und mit Hilfe einer if-Bedingung ausgeblendet wird. Das bedeutet, Angular versteckt Komponenten nicht einfach, sondern entfernt sie und bringt sie zurück.

Außerdem werden Komponenten erstellt und entfernt, wenn sie in Schleifen reaktiv durchlaufen werden. In diesem Fall erstellt und entfernt Angular ebenfalls Komponenten.

Lassen Sie es uns praktisch ausprobieren. Importieren wir das Interface OnDestroy:

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

Binden wir es an die Klasse an:

export class UserComponent implements OnDestroy {
	
}

Und jetzt schreiben wir unseren Hook:

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

Erstellen Sie eine reaktive if-Bedingung, mit der eine Kindkomponente angezeigt wird. Überprüfen Sie die Funktionsweise des gelernten Hooks.

In der Elternkomponente befindet sich ein Array mit Benutzernamen. Erstellen Sie eine Kindkomponente für einen Benutzer. Durchlaufen Sie das Array mit einer Schleife und geben Sie die Komponenten mit den Benutzern aus. Erstellen Sie einen Button, bei dessen Betätigung Elemente aus dem Array entfernt werden. Überprüfen Sie, ob in den Kind- komponenten der Hook beim Entfernen ausgelöst wird.