20. Qu’est ce qu’un composant ?

21. Les cycles de vie d’un composant

Un composant est une classe, qui contrôle une portion de l’écran. Cette portion de l’écran contrôlée par le composant, on l’appelle une vue: une vue peut être l’ensemble de la page web, une fenêtre de tchat, une barre de navigation, etc. Cette vue est définie dans le template du composant.

On peut dire que : 1 composant = 1 classe + 1 vue.

On définit la logique d’un composant dans une classe; c’est-à-dire ce qu’il faut pour faire fonctionner la vue. La classe d’un composant interagit avec la vue à travers des propriétés et des méthodes que nous allons voir.

Par exemple, imaginons un composant qui affiche tous les Pokémons présents dans notre application, sous forme de liste. Ce composant aura donc une propriété pokemons contenant tous les Pokémons à afficher.

Il s’agit d’un composant un peu plus complexe que le composant minimum que l’on avait vu au chapitre précédent, pour deux raisons:

  1. L’ajout d’une propriété pokemons: j’ai déclaré une propriété pokemons, et j’utilise le typage TypeScript pour indiquer que cette propriété devra contenir un tableau d’objet de type Pokemon. Cette propriété est privé et son usage est donc interne au composant AppComponent.
  2. J’initialise la propriété pokemons: ensuite, dans une méthode nommée ngOnInit, j’initialise la propriété avec trois Pokémons, qui ont pour propriétés name et hp. (‘hp‘ désigne le nombre de point de vie du Pokémon : Health Point).

D’accord pour la propriété pokemons, mais c’est quoi cette méthode ngOnInit, et ce nouvel import OnInit, et pourquoi tu implémentes cette fonction ?

Alors je ne vous ai pas tout dit. En réalité, ngOnInit n’est pas une simple méthode mais une méthode de cycle de vie du composant. Et nous allons voir tout de suite de quoi il s’agit dans la prochaine vidéo. 🙂

21. Les cycles 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