21. Les cycles de vie d’un composant

NOTE: Cette session est composé uniquement de contenu textuel.

22. Interagir sur le cycle de vie d’un composant

Chaque composant a un cycle de vie géré par Angular lui-même. Angular crée le composant, s’occupe de l’afficher, crée et affiche ses composants fils, vérifie quand les données des propriétés changent, et détruit les composants, avant de les retirer du DOM quand cela est nécessaire. Pratique, non ?

Angular nous offre la possibilité d’agir sur ces moments clefs quand ils se produisent, en implémentant une ou plusieurs interfaces, pour chacun des événements disponibles. Ces interfaces sont disponibles dans la librairie @angular/core d’Angular.

Chaque interface permettant d’interagir sur le cycle de vie d’un composant fournit une et une seule méthode, dont le nom est le nom de l’interface, préfixé par ng. Par exemple, l’interface OnInit fournit la méthode ngOnInit, et permet de définir un comportement lorsque le composant est initialisé.

Voici ci-dessous la liste des méthodes disponibles pour interagir avec le cycle de vie d’un composant, dans l’ordre chronologique du moment où elles sont appelées par Angular:

  1. ngOnChanges: C’est la méthode appelée en premier lors de la création d’un composant, avant même ngOnInit, et à chaque fois que Angular détecte que les valeurs d’une propriété du composant sont modifiées. La méthode reçoit en paramètre un objet représentant les valeurs actuelles et les valeurs précédentes disponibles pour ce composant.
  2. ngOnInit: Cette méthode est appelée juste après le premier appel à ngOnChanges, et elle initialise le composant après qu’Angular ait initialisé les propriétés du composant.
  3. ngDoCheck: On peut implémenter cette interface pour étendre le comportement par défaut de la méthode ngOnChanges, afin de pouvoir détecter et agir sur des changements qu’Angular ne peut pas détecter par lui-même.
  4. ngAfterViewInit: Cette méthode est appelée juste après la mise en place de la vue d’un composant (et des vues de ses composants fils s’il en a).
  5. ngOnDestroy: Appelée en dernier, cette méthode est appelée avant qu’Angular ne détruise et ne retire du DOM le composant. Cela peut se produire lorsqu’un utilisateur navigue d’un composant à un autre par exemple. Afin d’éviter les fuites de mémoire, c’est dans cette méthode que nous effectuerons un certain nombre d’opérations afin de laisser l’application « propre » (nous détacherons les gestionnaires d’événements par exemple).

Même si vous ne définissez pas explicitement des méthodes de cycle de vie dans votre composant, sachez que ces méthodes sont appelées en interne par Angular pour chaque composant. Lorsqu’on utilise ces méthodes, on vient donc juste surcharger tel ou tel événement du cycle de vie d’un composant !

Les méthodes que vous utiliserez le plus seront certainement ngOnInit et ngOnDestroy, qui permettent d’initialiser un composant, et de le nettoyer proprement par la suite lorsqu’il est détruit.

22. Interagir sur le cycle de vie d’un composant

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s