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é pokémons contenant tous les pokémons à afficher :
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-root', template: `<h1>Hello, Angular 2 !</h1>`, }) export class AppComponent implements OnInit { // 1. La propriété pokémons est un tableau d'objet de type Pokemon. private pokemons: Pokemon[]; // 2. Initialisation de la propriété pokémons. ngOnInit() { this.pokemons = [ { name: 'Bulbizarre', hp: 6 }, { name: 'Salamèche', hp: 6 }, { name: 'Carapuce', hp: 6 } ]; } }
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 :
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. Nous allons voir tout de suite de quoi il s’agit.