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

23. Gérer les interactions de l’utilisateur

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 de 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.

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. 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.
  • Soit plus tard, dans le constructeur.

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.

23. Gérer les interactions de l’utilisateur

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 )

w

Connexion à %s