Partie 1 : Découvrir Angular
Partie 2 : Acquérir les bases sur Angular
Partie 3 : Aller plus loin avec Angular
1 de 2

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

Nous allons interagir sur le cycle de vie d’un composant, et en particulier sur l’étape d’initialisation du composant.

Sachez que la méthode que nous allons voir est valable quelle que soit la méthode de cycle de vie.

La première chose à faire est d’importer l’interface que nous allons utiliser. Dans notre cas, il s’agit d’OnInit :

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

Ensuite, il faut implémenter cette interface pour le composant :

export class AppComponent implements OnInit {}

Enfin nous devons ajouter la méthode ngOnInit fournie par cette interface, dans notre composant :

export class AppComponent implements OnInit { 
 
 ngOnInit() { 
  // ce message s'affichera dans la console de votre navigateur 
  // dès que le composant est initialisé ! 
  console.log('ngOnInit !'); 
 } 
}

Et voilà, vous êtes maintenant capable d’ajouter une étape d’initialisation à vos composants ! Nous utiliserons beaucoup cette méthode pour initialiser les propriétés de nos composants.

Pourquoi est-ce qu’on s’embête à charger les données dans ngOnInit, alors que l’on pourrait le faire dans le constructeur du composant ?

Surtout pas ! C’est fortement déconseillé !

Il est chaudement recommandé de garder toute la logique de votre application en dehors du constructeur, surtout quand vous commencerez à récupérer les données d’un serveur distant. Le corps du constructeur peut éventuellement être utilisé pour les initialisations simples, et encore, nous allons voir tout de suite une autre manière de le faire.

Heu, j’initialise quoi du coup ? Et où ?

Je vais vous donner un exemple de code avec lequel vous devriez comprendre : vous avez un composant qui possède une propriété titre, une propriété sous-titre et une liste de tâches à afficher.

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

@component({ 
 selector: 'task-component', 
 template: '<h1>{{ title }} <em>{{ subtitle }}</em><h1>' 
}) 
export class TaskListComponent implements OnInit { 
 // 1. Je choisis de définir mon titre immédiatement lors de 
 // la déclaration de ma propriété. C'est plus concis. 
 title: string = "Liste de tâches"; 
 // 2. Je choisis d'assigner une valeur à cette propriété dans 
 // le constructeur de mon composant, plutôt que directement. 
 // J'ai le choix dans ce cas. 
 subtitle: string; 
 // 3. Je récupère les tâches à réaliser depuis un serveur distant. 
 tasks: Task[]; 

 constructor() { 
  // J'assigne une valeur à ma propriété. Il ne s'agit pas de 
  // code dit 'complexe', je peux le faire dans le constructeur. 
  this.subtitle = "Tâches urgentes"; 
 } 

 ngOnInit() { 
  // La récupération de données depuis un serveur distant 
  // est une opération complexe 
  // (appel asynchrone, gestion des erreurs...) 
  // Ce genre d'initialisation a sa place dans la méthode ngOnInit. 
  this.tasks = ...; 
 } 

}

Comme vous pouvez le voir, on peut choisir d’assigner des valeurs simples soit :

  • Au moment où vous déclarez une propriété à votre composant (ligne 10).
  • Soit plus tard dans le constructeur (ligne 18 puis ligne 22).

Vous avez le choix et cela dépend de la manière dont vous préférez vous organiser. La première méthode est plus compacte et évite d’ajouter des lignes de code supplémentaires à votre composant. De plus, cela nous permet d’avoir les initialisations des propriétés au même endroit. Dans la suite du cours c’est l’approche que je retiendrai.

En revanche les opérations dites « complexes », qui correspondent à des opérations propres à votre application, ne doivent pas se trouver dans le constructeur. Si vous avez compris ça, vos composants seront « propres » et ce sera un plaisir pour d’autres développeurs de relire votre code.