9. Hooks du cycle de vie des composants
Les composants passent par un cycle de vie : Angular les crée, les affiche, vérifie quand leurs propriétés liées aux données changent, et finit par les détruire avant de les retirer du DOM. Angular fournit des hooks (méthodes d'interface) que vous pouvez implémenter pour intervenir lors de ces moments clés.
Les hooks les plus courants
| Hook | Interface | Moment d'exécution |
|---|---|---|
ngOnInit | OnInit | Appelé une fois, après l'initialisation du composant et la définition des propriétés liées. Idéal pour la récupération de données. |
ngOnDestroy | OnDestroy | Appelé une fois, juste avant qu'Angular ne détruise le composant. Idéal pour le nettoyage (désabonnements, arrêt de timers). |
ngDoCheck | DoCheck | Appelé lors de chaque cycle de détection de changement, immédiatement après ngOnChanges et ngOnInit. |
ngAfterViewInit | AfterViewInit | Appelé une fois après l'initialisation de la vue du composant et de ses vues filles. |
Implémentation de OnInit et OnDestroy
Nous implémentons l'interface correspondante pour garantir que nous respectons le contrat et fournissons la méthode requise.
typescript import { Component, OnInit, OnDestroy } from '@angular/core';
@Component({ ... }) export class ClockComponent implements OnInit, OnDestroy { currentTime: string = ''; private timerInterval: any;
// 1. Logique d'initialisation ngOnInit(): void { console.log('ClockComponent initialisé. Démarrage du timer.'); this.timerInterval = setInterval(() => { this.currentTime = new Date().toLocaleTimeString(); }, 1000); }
// 2. Logique de nettoyage ngOnDestroy(): void { console.log('ClockComponent détruit. Arrêt du timer.'); if (this.timerInterval) { clearInterval(this.timerInterval); } } }
L'utilisation de ngOnDestroy est cruciale pour éviter les fuites de mémoire, en particulier lors de la manipulation de souscriptions ou d'intervalles qui persistent au-delà de l'existence du composant.