ngOnDestroy Hook in Angular
De hook ngOnDestroy wordt geactiveerd wanneer
een component wordt verwijderd. In deze hook kun je
resources vrijgeven, event listeners van
elementen opheffen, timers stoppen, enz.
Het aanmaken en verwijderen van een component in Angular
gebeurt wanneer het reactief wordt getoond
en verborgen met behulp van een if voorwaarde.
Dat betekent dat Angular componenten niet simpelweg verbergt,
maar ze verwijdert en ze weer terugbrengt.
Ook worden componenten aangemaakt en verwijderd, wanneer ze reactief worden doorlopen in loops. In dit geval maakt Angular ook componenten aan en verwijdert ze.
Laten we het in de praktijk proberen. We importeren de
interface OnDestroy:
import { OnDestroy } from '@angular/core';
We implementeren het in de klasse:
export class UserComponent implements OnDestroy {
}
En nu schrijven we onze hook:
export class UserComponent implements OnDestroy {
constructor() {
console.log('constructor is started');
}
ngOnDestroy() {
console.log('onDestroy is applied');
}
}
Maak een reactieve if waarmee
een child component wordt getoond. Controleer de werking van de geleerde
hook.
In het parent component is er een array met gebruikersnamen. Maak een child component voor een gebruiker. Doorloop de array met een loop en toon de componenten met gebruikers. Maak een knop waarmee elementen uit de array worden verwijderd. Controleer of in de child componenten de hook voor verwijdering wordt geactiveerd.
