Angular - 2-6 Comprendre le rôle de la déclaration de l'AppModule et du component
Maintenant que ServerComponent est enregistré dans AppModule,
on peut enfin l'utiliser. Son sélecteur est app-server. Comme déjà dit,
on ne l'ajoute pas à index.html — ça ne fonctionnerait pas. On va plutôt
l'ajouter dans app.component.html, le seul autre fichier HTML que nous
avons pour l'instant, et qui correspond au template du composant racine.
À l'intérieur, j'ajoute une ligne horizontale, puis en dessous notre nouvel élément. Le raccourci utilisé dans la vidéo est juste Emmet, un petit plugin disponible dans beaucoup d'IDE et d'éditeurs qui permet d'écrire du HTML plus rapidement :
<hr>
<app-server></app-server>
app-server, c'est bien notre propre sélecteur, le nouvel élément que nous
avons créé. Une fois le fichier sauvegardé, le projet se recompile avec succès et,
dans l'application en cours d'exécution, on voit apparaître notre
ServerComponent. Voilà donc le cycle complet : on crée un composant, on
l'enregistre dans le module d'application, puis on l'affiche dans la page en utilisant
son sélecteur dans le template d'un autre composant.
En résumé
Cette leçon vous montre comment utiliser un composant Angular personnalisé après sa création. En déclarant un composant dans l'AppModule, vous pouvez utiliser son sélecteur comme élément HTML dans vos templates. Le cours démontre comment ajouter votre composant au fichier `app.component.html` et le compiler pour l'afficher sur la page.
Points clés
- Les composants doivent être déclarés dans l'AppModule avant de pouvoir être utilisés dans les templates
- Le sélecteur d'un composant fonctionne comme un élément HTML personnalisé que vous pouvez ajouter n'importe où dans vos templates
- Une fois ajouté au module et au template, le composant se compile automatiquement et s'affiche sur la page
- L'utilisation de raccourcis comme Emmet accélère l'écriture du code HTML pour inclure vos composants personnalisés
- Le navigateur affiche immédiatement le composant rendu quand vous sauvegardez vos modifications
Questions fréquentes
Pourquoi mon composant n'apparaît pas même après sa création ?
Votre composant doit être déclaré dans l'AppModule avant de pouvoir l'utiliser. Une fois déclaré, vous pouvez ajouter son sélecteur comme élément HTML dans n'importe quel template (par exemple `app.component.html`).
Où dois-je ajouter mon composant personnalisé pour qu'il s'affiche ?
Ajoutez le sélecteur de votre composant directement dans le template HTML (comme `app.component.html`). Par exemple, si votre sélecteur est `app-absorber`, écrivez `<app-absorber></app-absorber>` où vous voulez le voir.
Le sélecteur du composant est-il comme une balise HTML normale ?
Oui, une fois votre composant déclaré dans l'AppModule, vous pouvez traiter son sélecteur comme une balise HTML personnalisée standard et l'utiliser n'importe où dans vos templates.