Guide du débutant sur les cycles de vie des composants angulaires

Avant de plonger dans les hooks du cycle de vie, il est essentiel d'avoir une compréhension fondamentale de quelques sujets fondamentaux. D'après la documentation angulaire :

Prérequis

Avant de travailler avec des hooks de cycle de vie, vous devez avoir une compréhension de base des éléments suivants :

• Programmation TypeScript
• Principes fondamentaux de la conception d'applications angulaires, tels que décrits dans Angular Concepts

Une fois que vous êtes à l'aise avec ces prérequis, vous êtes prêt à explorer les puissants hooks de cycle de vie fournis par Angular.

Les cycles de vie des composants angulaires sont au cœur de la manière dont les composants angulaires sont créés, mis à jour et détruits. Comprendre ces cycles de vie permet aux développeurs de contrôler le comportement des composants tout au long de leur durée de vie, améliorant ainsi à la fois les fonctionnalités et l'expérience utilisateur. Dans cet article, nous détaillerons les hooks du cycle de vie des composants angulaires, en fournissant des exemples et en expliquant leurs cas d'utilisation typiques.

Que sont les hooks de cycle de vie dans Angular ?

Angular fournit plusieurs hooks de cycle de vie que les développeurs peuvent exploiter pour exécuter du code spécifique à différentes étapes du cycle de vie d'un composant. De l'initialisation du composant à sa destruction, ces hooks aident à gérer l'état, le comportement et le nettoyage des ressources du composant.

Voici une liste de tous les hooks de cycle de vie dans Angular :

1. ngOnChanges
2. ngOnInit
3. ngDoCheck
4. ngAfterContentInit
5. ngAfterContentChecked
6. ngAfterViewInit
7. ngAfterViewChecked
8. ngOnDestroy

Chaque hook a un objectif spécifique et est appelé à un moment précis du cycle de vie du composant. Plongeons dans chacun d’eux.

1. ngOnChanges

Objectif : Appelé lorsqu'une propriété d'entrée change.

Il s'agit du premier hook de cycle de vie à être appelé après la construction du composant. La méthode ngOnChanges est déclenchée chaque fois que la valeur d'une propriété d'entrée change. C'est particulièrement utile lorsque vous souhaitez exécuter du code en réponse à des modifications dans les propriétés d'entrée liées aux composants.

Exemple :

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-sample',
  template: `<p>{{ data }}</p>`
})
export class SampleComponent implements OnChanges {
  @Input() data: string;

  ngOnChanges(changes: SimpleChanges): void {
    console.log('Data changed:', changes.data.currentValue);
  }
}

2. ngOnInit

Objectif : Appelé une fois, après le premier ngOnChanges du composant.

Le hook ngOnInit est l'endroit où va la plupart du code d'initialisation. C'est un endroit idéal pour initialiser les propriétés, configurer les abonnements requis ou effectuer les appels HTTP dont dépend le composant.

Exemple :

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-sample',
  template: `<p>{{ info }}</p>`
})
export class SampleComponent implements OnInit {
  info: string;

  ngOnInit(): void {
    this.info = 'Component initialized!';
  }
}

3.ngDoCheck

Objectif : Appelé lors de chaque exécution de détection de changement.

Le hook ngDoCheck vous permet d'implémenter votre propre algorithme de détection de changement. Cela peut être utile pour suivre les changements profonds dans les objets qu'Angular ne détecte pas nativement. Cependant, utilisez-le avec prudence car il peut affecter les performances s'il n'est pas utilisé correctement.

Exemple :

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-sample',
  template: `<p>{{ data }}</p>`
})
export class SampleComponent implements OnChanges {
  @Input() data: string;

  ngOnChanges(changes: SimpleChanges): void {
    console.log('Data changed:', changes.data.currentValue);
  }
}

4. ngAfterContentInit

Objectif : Appelé une fois, après le premier ngDoCheck.

Ce hook est invoqué après qu'Angular ait projeté du contenu externe dans le composant. C'est particulièrement utile dans les composants qui incluent du contenu externe dans leur modèle.

Exemple :

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-sample',
  template: `<p>{{ info }}</p>`
})
export class SampleComponent implements OnInit {
  info: string;

  ngOnInit(): void {
    this.info = 'Component initialized!';
  }
}

5. ngAfterContentChecked

Objectif : Appelé après chaque vérification du contenu projeté.

Le hook de cycle de vie ngAfterContentChecked est exécuté chaque fois qu'Angular vérifie le contenu projeté dans le composant. C'est similaire à ngAfterContentInit mais s'exécute après chaque cycle de détection de changement.

Exemple :

import { Component, DoCheck } from '@angular/core';

@Component({
  selector: 'app-sample',
  template: `<p>{{ count }}</p>`
})
export class SampleComponent implements DoCheck {
  count: number = 0;

  ngDoCheck(): void {
    console.log('Change detection running');
    this.count++;
  }
}

6. ngAfterViewInit

Objectif : Appelé une fois, après le premier ngAfterContentChecked.

Ce hook de cycle de vie est utilisé pour effectuer des actions après l'initialisation de la vue du composant (et de toutes les vues enfants). Il est couramment utilisé pour manipuler ou lire les propriétés des enfants de la vue après leur rendu par Angular.

Exemple :

import { Component, AfterContentInit } from '@angular/core';

@Component({
  selector: 'app-sample',
  template: `<ng-content></ng-content>`
})
export class SampleComponent implements AfterContentInit {
  ngAfterContentInit(): void {
    console.log('Content projected');
  }
}

7. ngAfterViewChecked

Objectif : Appelé après chaque vérification de la vue du composant.

Ce hook est appelé après qu'Angular ait vérifié la vue du composant pour les mises à jour. C'est similaire à ngAfterViewInit mais s'exécute après chaque cycle de détection de changement. Cela peut être utilisé pour appliquer une logique qui dépend des mises à jour dans la vue.

Exemple :

import { Component, AfterContentChecked } from '@angular/core';

@Component({
  selector: 'app-sample',
  template: `<ng-content></ng-content>`
})
export class SampleComponent implements AfterContentChecked {
  ngAfterContentChecked(): void {
    console.log('Projected content checked');
  }
}

8. ngOnDestroy

Objectif : Appelé juste avant qu'Angular ne détruise le composant.

Le hook ngOnDestroy est l'endroit idéal pour effectuer des tâches de nettoyage, telles que la désinscription des observables, le détachement des gestionnaires d'événements ou la libération de ressources qui pourraient autrement provoquer des fuites de mémoire.

Exemple :

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-sample',
  template: `<p #textElement>Hello, world!</p>`
})
export class SampleComponent implements AfterViewInit {
  @ViewChild('textElement') textElement: ElementRef;

  ngAfterViewInit(): void {
    console.log('View initialized:', this.textElement.nativeElement.textContent);
  }
}

Conclusion

Comprendre et utiliser efficacement ces hooks de cycle de vie peut vous donner un contrôle plus précis sur vos applications Angular. De l'initialisation des données dans ngOnInit au nettoyage des ressources dans ngOnDestroy, les hooks de cycle de vie fournissent le contrôle essentiel nécessaire aux applications dynamiques.

Dans notre prochain article, nous approfondirons la façon dont ces hooks fonctionnent ensemble dans une application Angular réelle, en montrant des exemples de cycles de vie et d'interactions plus complexes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!