Angular

Appearance

C'est quoi le cycle de vie dans les composants Angular ? ​

Le cycle de vie d'un composant Angular désigne l'ensemble des étapes que suit le composant depuis sa création jusqu'à sa destruction. Angular fournit plusieurs points de repère tout au long de ce cycle de vie, appelés "méthodes de cycle de vie", auxquels vous pouvez vous connecter pour exécuter du code à des moments précis du cycle de vie de votre composant.

mermaid
sequenceDiagram
  participant C as Composant
  participant S as Service
  participant P as Parent

  Note over C: Création du composant
  C->>S: Injection des dépendances
  C->>P: Envoi des données d'entrée
  C->>C: Initialisation des données d'entrée
  C->>C: Création du template
  C->>C: Exécution du composant
  Note over C: Interactions avec l'utilisateur
  C->>C: Destruction du composant
  C->>C: Nettoyage des ressources
sequenceDiagram
  participant C as Composant
  participant S as Service
  participant P as Parent

  Note over C: Création du composant
  C->>S: Injection des dépendances
  C->>P: Envoi des données d'entrée
  C->>C: Initialisation des données d'entrée
  C->>C: Création du template
  C->>C: Exécution du composant
  Note over C: Interactions avec l'utilisateur
  C->>C: Destruction du composant
  C->>C: Nettoyage des ressources

Voici une explication de chaque étape du cycle de vie du composant :

  1. Création du composant : le composant est créé.
  2. Injection des dépendances : les dépendances du composant (par exemple, les services) sont injectées.
  3. Envoi des données d'entrée : le composant parent envoie les données d'entrée au composant enfant.
  4. Initialisation des données d'entrée : le composant enfant initialise ses données d'entrée avec les valeurs fournies par le composant parent.
  5. Création du template : le template du composant est compilé et le rendu est effectué.
  6. Exécution du composant : le composant est en cours d'exécution et interagit avec l'utilisateur.
  7. Interactions avec l'utilisateur : le composant réagit aux événements de l'utilisateur (par exemple, les clics sur des boutons).
  8. Destruction du composant : le composant est détruit et ses ressources sont libérées.
  9. Nettoyage des ressources : le composant effectue le nettoyage des ressources (par exemple, les abonnements aux observables).

Voici les principales méthodes de cycle de vie d'un composant Angular, qui sont appelées à différents moments du cycle de vie du composant :

  • ngOnChanges : appelée chaque fois que des modifications sont apportées aux propriétés de l'objet d'entrée du composant.
  • ngOnInit : appelée une seule fois après l'initialisation du composant.
  • ngDoCheck : appelée à chaque itération de la boucle de vérification de l'état du composant.
  • ngAfterContentInit : appelée une seule fois après que le contenu du composant est initialisé.
  • ngAfterContentChecked : appelée à chaque itération de la boucle de vérification du contenu du composant.
  • ngAfterViewInit : appelée une seule fois après que la vue du composant est initialisée.
  • ngAfterViewChecked : appelée à chaque itération de la boucle de vérification de la vue du composant.
  • ngOnDestroy : appelée avant la destruction du composant.

Vous pouvez utiliser ces méthodes de cycle de vie pour exécuter du code à différents moments du cycle de vie de votre composant, par exemple pour effectuer des opérations de nettoyage lorsque le composant est détruit, ou pour mettre à jour le template du composant lorsque les données de l'entrée du composant sont modifiées.