Créer le composant Heroes

A l'aide de la CLI angulaire, générez un nouveau composant nommé heroes.
La CLI crée un nouveau dossier src/app/heroes/et génère les trois fichiers du fichier HeroesComponent.

Le fichier HeroesComponent de classe est comme suit:

app/heroes/heroes.component.ts (version initiale)
Vous importez toujours le Componentsymbole de la bibliothèque principale angulaire et annotez la classe de composants avec .@Component

@Component est une fonction de décorateur qui spécifie les métadonnées angulaires du composant.

La CLI a généré trois propriétés de métadonnées:

• selector- le sélecteur d'élément CSS du composant
• templateUrl- l'emplacement du fichier de modèle du composant.
• styleUrls- l'emplacement des styles CSS privés du composant.

Le sélecteur d'élément CSS , 'app-heroes', correspond au nom de l'élément HTML qui identifie ce composant dans le modèle d'un composant parent.

Le ngOnInitest un crochet de cycle de vie. Appels angulaires ngOnInitpeu de temps après la création d'un composant. C'est un bon endroit pour mettre la logique d'initialisation.

Toujours exportla classe de composant afin que vous puissiez le importfaire ailleurs ... comme dans le AppModule.

Ajouter une propriété de héros

Ajouter une propriété hero à HeroesComponent, un héros nommé "Windstorm".

heroes.component.ts (propriété du héros)

Afficher le nom du héros

Ouvrez le heroes.component.htmlfichier de modèle. Supprimez le texte par défaut généré par la CLI angulaire et remplacez-le par une liaison de données à la nouvelle heropropriété.

heroes.component.html

Afficher la vue du compossant HeroesComponent

Pour l'afficher HeroesComponent, vous devez l'ajouter au modèle du shell AppComponent.

N'oubliez pas que app-heroes c'est le sélecteur d'élément pour le HeroesComponent.
Ajoutez donc un ‹app-heroes› élément au AppComponent fichier de modèle, juste en dessous du titre.

src/app/app.component.html
En supposant que la commande CLI ng serve soit toujours en cours d'exécution, le navigateur doit actualiser et afficher à la fois le titre de l'application et le nom du héros.

Créer un classe Hero

Créez une Hero classe dans son propre fichier dans le dossier src/app.
Donnez-lui deux propriétés "id" et "name".

src/app/hero.ts
Retournez dans la classe HeroesComponent et importez la Heroclasse.

Refactoriser la heropropriété du composant pour qu'elle soit de type Hero. Initialisez-le avec un id de 1 et le nom Windstorm.

Le fichier HeroesComponent de classe révisé devrait ressembler à ceci :

src/app/heroes/heroes.component.ts
La page ne s'affiche plus correctement car vous avez modifié le héros d'une chaîne en un objet.

Afficher les propriétés de l'objet héros

Mettez à jour la liaison dans le modèle pour annoncer le nom du héros et afficher les deux, idainsi namequ'une présentation détaillée comme celle-ci:

heroes.component.html (modèle de HeroesComponent)
Le navigateur actualise et affiche les informations du héros.

Formater avec le Pipe Uppercase

Modifier la hero.nameliaison comme ceci.

heroes.component.html (modèle de HeroesComponent)
Le navigateur s'actualise et le nom du héros s'affiche maintenant en majuscules.

Le mot uppercasedans la liaison d'interpolation, juste après l'opérateur de canal (|), active la fonction intégrée Uppercase. Les pipes sont un bon moyen de formater des chaînes, des montants en devise, des dates et d'autres données d'affichage. Angular est livré avec plusieurs "pipes" intégrés et vous pouvez créer les vôtres.

Modifier le nom du héros

Les utilisateurs devraient pouvoir modifier le nom du héros dans une zone de texte du type ‹input› .
La zone de texte doit à la fois afficher la propriété "name" du héros et mettre à jour cette propriété à mesure que l'utilisateur le tape. Cela signifie que le flux de données de la classe du composant doit ce faire, de l'écran à la classe et de la classe à l'écran.

Pour automatiser ce flux de données, configurez une liaison de données bidirectionnelle entre l'‹input› élément du formulaire et la hero.namepropriété.

Liaison à double sens (bidirectionnelle)

Refactoriser la zone de détails dans le HeroesComponent modèle pour qu'il ressemble à ceci :

src/app/heroes/heroes.component.html (modèle de HeroesComponent)
[(ngModel)] est la syntaxe de liaison de données bidirectionnelle d'Angular.

Ici, il lie la propriété hero.name à la zone de texte HTML afin que les données puissent circuler dans les deux sens : de hero.name propriété à la zone de texte, et de la zone de texte à hero.name.

Le FormsModule manquant

Notez que l'application a cessé de fonctionner lorsque vous avez ajouté [(ngModel)].
Pour voir l'erreur, ouvrez les outils de développement du navigateur et recherchez dans la console un message tel que

Bien qu'il ngModel est une directive angulaire valide, elle n'est pas disponible par défaut. Il appartient à FormsModule et vous devez choisir de l'utiliser.

AppModule

Angular a besoin de savoir comment les éléments de votre application s'emboîtent et quels sont les autres fichiers et bibliothèques requis par l'application. Cette information s'appelle métadonnées.

Certaines des métadonnées se trouvent dans les décorateurs que vous avez ajoutés à vos classes de composants. D'autres métadonnées critiques se trouvent dans les décorateurs.@Component et @NgModule

Le décorateur le plus important annote la classe AppModule de niveau supérieur. @NgModule

La CLI angulaire a généré une AppModuleclasse src/app/app.module.ts lorsqu'il a créé le projet.
C'est là que vous vous inscrivez à la FormsModule.

Importation FormsModule

Ouvrez AppModule (app.module.ts) et importez le FormsModule symbole de la @angular/forms bibliothèque.

app.module.ts (importation de symboles FormsModule)
Ajoutez-les ensuite au tableau des métadonnées, qui contient la liste des modules externes nécessaires à l'application. @NgModule imports

app.module.ts (importation de symboles FormsModule)
Lorsque le navigateur est actualisé, l'application devrait fonctionner à nouveau. Vous pouvez modifier le nom du héros et voir les modifications reflétées immédiatement dans la zone de texte.

Déclarez le HeroesComponent

Chaque composant doit être déclaré dans un NgModule.

Vous n'avez pas déclaré le HeroesComponent, alors, pourquoi l'application a-t-elle fonctionné ? Cela a fonctionné parce que la CLI angulaire a déclarée HeroesComponent a AppModule au moment oú elle a généré ce composant.

Ouvrez src/app/app.module.ts et regardez en tête de fichier.

Le HeroesComponentest est déclaré dans le tableau de declarations du @NgModule.


Notez que AppModule déclare les deux composants de l'application, AppComponent et HeroesComponent.

Code review

Votre application devrait ressembler à ceci. Voici les fichiers de code discutés sur cette page.

• heroes.component.ts
• heroes.component.html

• app.module.ts
• app.component.ts
• app.component.html
• hero.ts

Résumé

• Vous avez utilisé la CLI pour créer une seconde HeroesComponent.
• Vous avez affiché le HeroesComponenten l'ajoutant au AppComponentshell.
• Vous avez appliqué le UppercasePipepour formater le nom.
• Vous avez utilisé la liaison de données bidirectionnelle avec la ngModeldirective.
• Vous avez appris sur le AppModule.
• Vous avez importé le FormsModuledans le AppModuleafin que Angular reconnaisse et applique la ngModeldirective.
• Vous avez appris l'importance de déclarer des composants dans le AppModule et avez apprécié que le CLI le déclare pour vous.