Hook ngOnDestroy w Angularze

Hook ngOnDestroy jest wywoływany podczas usuwania komponentu. W tym hooku można zwolnić zasoby, usunąć subskrypcje na zdarzenia elementów, zatrzymać timery itp.

Tworzenie i usuwanie komponentu w Angularze ma miejsce, gdy jest on reaktywnie pokazywany i ukrywany za pomocą warunku if. To znaczy, że Angular nie tylko ukrywa komponenty, ale je usuwa i przywraca z powrotem.

Również komponenty są tworzone i usuwane, gdy są reaktywnie iterowane w pętlach. W tym przypadku Angular również tworzy i usuwa komponenty.

Sprawdźmy to w praktyce. Zaimportujmy interfejs OnDestroy:

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

Podłączmy go do klasy:

export class UserComponent implements OnDestroy {
	
}

A teraz napiszmy nasz hook:

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

Zrób reaktywny if za pomocą którego będzie pokazywany komponent potomny. Sprawdź działanie poznanego hooka.

W komponencie rodzica dana jest tablica imion użytkowników. Zrób komponent potomny z użytkownikiem. Przejdź po tablicy pętlą i wyświetl komponenty z użytkownikami. Zrób przycisk, po kliknięciu którego będą usuwane elementy z tablicy. Sprawdź, że w komponentach potomnych będzie wywoływany hook przy usuwaniu.