Le hook ngOnDestroy dans Angular
Le hook ngOnDestroy se déclenche lors de
la suppression du composant. Dans ce hook, on peut
libérer des ressources, supprimer les abonnements aux
événements des éléments, arrêter les minuteries, etc.
La création et la suppression d'un composant dans Angular
se produisent lorsqu'il est affiché et masqué réactivement
via une condition if.
Autrement dit, Angular ne se contente pas de masquer les composants,
mais les supprime et les restaure.
Les composants sont également créés et supprimés lorsqu'ils sont parcourus de manière réactive dans des boucles. Dans ce cas, Angular crée et supprime également les composants.
Essayons en pratique. Importons l'interface
OnDestroy :
import { OnDestroy } from '@angular/core';
Connectons-la à la classe :
export class UserComponent implements OnDestroy {
}
Et maintenant, écrivons notre hook :
export class UserComponent implements OnDestroy {
constructor() {
console.log('constructor is started');
}
ngOnDestroy() {
console.log('onDestroy is applied');
}
}
Créez un if réactif avec
lequel un composant enfant sera affiché.
Vérifiez le fonctionnement du hook étudié.
Dans le composant parent, un tableau de noms d'utilisateurs est donné. Créez un composant enfant pour l'utilisateur. Parcourez le tableau en boucle et affichez les composants avec les utilisateurs. Créez un bouton sur lequel un clic supprimera les éléments du tableau. Vérifiez que le hook de suppression se déclenchera dans les composants enfants.
