Angularin ngOnDestroy-koukku

ngOnDestroy-koukku laukeaa, kun komponentti poistetaan. Tässä koukussa voit vapauttaa resursseja, poistaa tapahtumien tilauksia elementeistä, pysäyttää ajastimet jne.

Komponentin luominen ja poistaminen Angularissa tapahtuu, kun se reaktiivisesti näytetään ja piilotetaan käyttämällä if-ehtoa. Eli Angular ei vain piilota komponentteja, vaan poistaa ne ja tuo ne takaisin.

Myös komponentit luodaan ja poistetaan, kun niitä iteroidaan reaktiivisesti silmukoissa. Tässä tapauksessa Angular myös luo ja poistaa komponentteja.

Kokeillaan käytännössä. Tuodaan rajapinta OnDestroy:

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

Yhdistetään se luokkaan:

export class UserComponent implements OnDestroy {
	
}

Ja nyt kirjoitetaan koukku:

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

Tee reaktiivinen if, jolla lapsikomponentti näytetään. Tarkista opitun koukun toiminta.

Yläkomponentissa on käyttäjien nimien taulukko. Tee lapsikomponentti käyttäjälle. Iteroi taulukko silmukalla ja tulosta käyttäjäkomponentit. Tee painike, jota painamalla taulukon elementtejä poistetaan. Tarkista, että lapsikomponenteissa koukku laukeaa poistettaessa.