L’arbre des composants Angular

Les composants d’une application Angular sont imbriqués les uns dans les autres, comme des poupées gigognes.

On part toujours d’un unique composant au sommet de l’arbre, appelé composant racine (root component). Ce composant en contient d’autres, qui à leur tour en contiennent d’autres, et ainsi de suite.

Du point de vue de l’extérieur, l’intégralité de l’application est donc contenue dans le composant racine. C’est d’ailleurs le seul composant qu’on met dans la page index.html pour afficher toute l’application.

Cet arbre de composants vous rappelle peut-être l’arbre que forment les balises d’une page HTML. Là aussi, on part d’une balise racine (<html>), qui contient des balises enfant (<head> et <body>), qui contiennent à leur tour des balises enfant (par exemple, <title>, <p>)… Cet arbre s’appelle le DOM, Document Object Model, et il possède en effet des analogies avec l’arbre des composants Angular.

Une autre manière de le formuler serait de dire que les composants Angular sont comme des balises HTML maison, et que l’arbre des composants est à une application Angular ce que le DOM est à une page HTML : une représentation arborescente des éléments de l’interface.


Le composant racine

Le composant racine d’une application Angular est celui qui est affiché en premier et qui contient l’ensemble de l’application.

Par convention, le CLI appelle ce composant AppComponent et lui donne le selector app-root. Mais n’importe quel composant peut devenir le composant racine pourvu qu’il remplisse les conditions suivantes :

1) Il doit être déclaré dans la propriété bootstrap du AppModule.

@NgModule({
  imports: [BrowserModule],
  bootstrap: [AppComponent]  // <!-- Composant racine
})
export class AppModule { }

2) Sa balise doit être affichée dans le fichier index.html du projet.

<!doctype html>
<html>
<body>
  <app-root></app-root>
</body>
</html>

3) Dans son template, il doit afficher les composants qui correspondent au reste de l’application.

L’arbre des composants

Tous les composants de l’application s’imbriquent comme des poupées gigognes, en partant du composant racine jusqu’aux composants les plus profonds de l’arborescence.

Par exemple, le composant racine pourrait contenir une barre de navigation, une zone de contenu et un pied de page :

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

@Component({
  selector: 'app-root',
  template: `
    <app-navbar></app-navbar>
    <app-content></app-content>
    <app-footer></app-footer>
  `
})
export class AppComponent { }

Ces composants (barre de nav, contenu…) peuvent à leur tour contenir d’autres composants, et ainsi de suite. Cette imbrication de composants dessine donc une arborescence appelée arbre des composants.

Il n’y a pas de limites sur le nombre de composants ni sur la profondeur d’imbrication de l’arbre des composants, mais il est préférable de ne pas les multiplier inutilement afin de ne pas nuire aux performances et pour s’y retrouver plus facilement dans son code.

Deux types de composants enfant : ViewChild et ContentChild

Dans l’arbre des composants présenté ici, le lien parent-enfant entre deux composants se fait en affichant un composant (l’enfant) dans le template d’un autre composant (le parent). Par exemple, dans l’exemple précédent, <app-navbar> est un enfant de <app-root>. Cela correspond à la syntaxe ViewChild.

Il existe une autre syntaxe pour faire un lien parent-enfant, appelée ContentChild, où la balise du composant enfant est affichée directement à l’intérieur de la balise du composant parent (et non dans son template) :

<parent>
  <child></child>  <!-- ContentChild -->
</parent>

C’est analogue à la manière dont les balises HTML classiques sont imbriquées. Voir #45 Comprendre la différence entre ViewChild et ContentChild (composant parent-enfant) pour plus d’infos.

Informations

Tags : components

Dernière mise à jour :

Auteur : AngularChef

Qualité : Bonne