Maintenant que nous avons examiné la liaison de données,
en faisons usage pour
en travaillant sur l'application Angular que nous utilisons jusqu'à présent.
Dans la version précédente de l'application Angular,
nous avions le menu rendu,
et ensuite nous avions un plat spécifique affiché en bas.
Maintenant, nous aimerions idéalement que l'utilisateur soit en mesure de cliquer
sur l'un des éléments du menu et ensuite les détails à afficher à l'utilisateur.
C'est là que l'utilisation de la liaison de données nous aidera
à implémenter notre application pour activer ce type de fonctionnalité.
En allant à l'état actuel de notre application dans le navigateur,
nous pouvons maintenant voir que nous avons notre menu et en bas nous
avons les détails d'un plat spécifique qui y est montré.
Maintenant, c'est bien et bon pour commencer, mais idéalement,
ce que nous aimerions avoir, c'est que si l'utilisateur clique sur l'un de ces plats,
nous voulons être en mesure de montrer les détails du plat au bas du menu ici.
Donc, nous aimerions que les détails du plat soient changés
en fonction de quel plat spécifique nous cliquons à tout moment.
Alors, comment pouvons-nous y parvenir ?
Donc, c'est là que l'utilisation de la liaison de données vient à notre rescousse.
En allant à notre application,
la première chose que je vais faire est dans le dossier partagé,
maintenant vous vous rendez compte que l'information de plat est utilisée à la fois dans le composant de menu et dans le composant de détail de plat.
Maintenant, quand vous avez des informations partagées comme ceci,
, il serait plutôt plus pratique d'avoir un endroit centralisé
à partir duquel ces informations sont fournies à ces deux composants.
Donc pour m'aider à faire ça,
ce que je vais faire est d'aller dans le dossier de partage, puis de créer un nouveau fichier,
et ensuite je nomme ce fichier comme dishes.ts.
A l'intérieur de ce fichier dishes.ts,
Je vais créer la constante qui fournit les détails des plats.
Donc, pour ce faire,
Je voudrais d'abord importer le plat,
de la classe de plat
que j'ai déjà définie plus tôt.
Alors maintenant, je peux définir une constante
appelée comme plats du type un tableau de plats,
et c'est là que je vais stocker les détails de tous mes plats.
Maintenant, dans la version précédente de l'application,
nous avons vu l'utilisation des plats et nous avons vu
le tableau d'objets JavaScript qui contient les détails des plats.
Maintenant, nous allons déplacer tout ce contenu et avec une version mise à jour de celui-ci.
Donc, une version mise à jour du tableau d'objets JavaScript de la vaisselle
vous est donnée dans les instructions,
alors allez simplement copier
l'ensemble du tableau d'objets JavaScript à partir de là et puis nous le collerons en place ici.
Donc, cela devient l'emplacement central à partir duquel
les informations sur la vaisselle sont fournies à votre application.
J'ai maintenant coupé et collé les détails de
le plat qui sont donnés dans les instructions d'exercice en place ici,
et donc j'ai quatre plats collés ici un,
deux trois, et quatre plats collés ici,
et chacun de ces plats contient bien sûr
les détails du plat spécifique et aussi des commentaires pour le plat.
Maintenant, de cette façon, le rendu des informations dans
le modèle de détail du plat devient simple pour n'importe lequel de ces plats choisis.
Maintenant, si vous retournez en arrière, vous verrez qu'il y a quelques lignes rouges ici.
La raison de ces lignes rouges est que lorsque vous regardez l'objet plat ici,
vous verrez que dans l'objet plat nous n'avons pas de propriété appelée comme commentaires.
Donc, nous devons créer une nouvelle propriété appelée
commentaires à ajouter dans ce plat ici. Alors, comment on fait ça ?
Donc, pour ce faire, nous allons dire des commentaires et
puis je dirais tableau de commentaires ici.
Maintenant, vous réalisez immédiatement qu'il n'y a pas de tableau de commentaires disponible pour nous,
donc nous devons créer ce tableau de commentaires.
Donc, ce que je vais faire est que je vais créer une autre classe JavaScript
qui contient les détails du commentaire là-bas.
Donc, pour ce faire, je vais d'abord importer le commentaire de
la classe de commentaire ici.
Maintenant, bien sûr, la ligne rouge me dit immédiatement que je n'ai pas de classe de commentaire.
Alors, comment pouvons-nous ajouter une classe de commentaire ?
Donc, en allant dans le dossier partagé,
nous allons créer un nouveau fichier nommé comment.ts et à l'intérieur de ce commentaire,
nous allons définir une classe appelée commentaire ici.
Maintenant, nous devons définir certaines propriétés pour cette classe de commentaires.
Alors, quelles sont les propriétés que nous avons ?
Jetons un coup d'oeil à notre fichier .ts
et ensuite nous verrons quelles sont les propriétés de chaque commentaire.
En allant dans le fichier dishes.ts,
vous voyez que les commentaires contiennent
une propriété appelée comme une note qui semble être un nombre,
alors vous avez un commentaire qui est une chaîne et
auteur qui est une chaîne et une date qui est aussi une chaîne.
Donc, nous devons définir quatre propriétés pour ma classe de commentaire ici.
Donc, en revenant à la classe de commentaire,
, je définirais la cote comme un nombre.
Donc, dans le script de type,
tout est un nombre ici alors nous avons eu un commentaire qui est un auteur de chaîne,
qui est aussi une chaîne,
et ensuite la date qui est aussi une chaîne ici.
Donc, ce sont les quatre propriétés que nous avons ici.
Maintenant, évidemment, nous avons vu comment nous utilisons la chaîne de date dans l'exercice précédent,
et dans l'affectation comment nous avons utilisé
la chaîne de date pour afficher la date du commentaire là-bas.
Maintenant, au cas où vous vous demandez,
qu'est-ce que cette chaîne de date contient réellement ?
En allant ici, vous verrez que cette chaîne de date est avec un certain format.
Donc, c'est le format standard pour stocker une date ici.
Ce format de date est la façon ISO OSI de spécifier le format de date.
Donc, nous allons juste utiliser ceci,
donc c'est un format standardisé qui est également utilisé dans
de nombreux langages de programmation qui vous permet de stocker les données sous forme de chaîne ici,
donc je vais juste l'utiliser en tant que tel ici.
Après avoir apporté les modifications au fichier
dish.ts comme ceci ici et ensuite ajouté dans la classe de commentaire ici,
nous voyons maintenant que le fichier dishes.ts n'a plus ces lignes rouges car
le commentaire a été ajouté en tant que tableau d'objets à ma classe de plat ici.
Donc, cela fonctionne bien jusqu'à présent.
Maintenant, comment utilisons-nous cela ?
Maintenant, pour en faire usage,
nous allons aller au menu component.ts,
et puis ici nous avons cette constante définie ici.
Maintenant, ce n'est pas la bonne façon de le faire
plus tard, vous me verrez utiliser un service pour tout cela.
Alors, laissez-moi couper complètement cette constante d'ici et au lieu d'utiliser cette constante,
je vais maintenant importer des plats
du dossier partagé
ici, des plats partagés ici.
Donc, notez que ce dossier vaisselle exporte la constante vaisselle ici.
Donc, c'est la raison pour laquelle nous pouvons en faire usage.
Alors, en revenant à la vaisselle un ici,
J'ai besoin d'exporter ça d'ici,
donc je dirais exporter.
Constante. Donc, quand je fais cela,
alors dans mon composant de menu, je peux voir que mes plats peuvent être importés ici correctement.
Ensuite, le reste du code ici fonctionnera très bien sans aucun changement.
Vous verrez que si vous enregistrez les valeurs maintenant
et ensuite vous regardez votre application web dans le navigateur,
il sera très bien rendu même après ces changements.
Après avoir enregistré toutes les modifications que vous avez faites jusqu'à présent dans tous les fichiers,
si vous allez regarder votre page web,
votre page web s'affiche comme avant.
Maintenant, la deuxième partie du problème.
Nous voulons pouvoir communiquer.
Lorsque nous cliquons sur l'un de ces éléments de menu,
nous voulons pouvoir communiquer cette information afin que
le plat correspondant soit rendu ici.
Donc, c'est là que nous allons prendre l'aide de
la liaison de données que nous avons appris jusqu'à présent.
En revenant au fichier de modèle de composants de menu,
ce que nous allons faire est que pour
ce « app-dishdetail » que vous incluez en bas ici,
pour ajouter dans le modèle de composants de détail de plat au modèle de composants de menu,
nous allons ajouter dans une propriété appelée Dish.
Ensuite, nous allons assigner ceci à « SelectedDish ».
Vous vous rappellerez que le plat sélectionné est une variable que nous avons
définie dans nos composants de menu fichier TypeScript ici.
Donc, de cette façon ; cette valeur de ce plat sélectionné sera transmise par ce plat de propriété ici.
Maintenant, nous allons voir comment le composant de détail du plat peut récupérer cette information
et ensuite l'utiliser bien à l'étape suivante de l'exercice.
Maintenant, pendant que nous sommes ici,
nous allons aussi résoudre l'autre problème que nous devons traiter.
Autrement dit, lorsque l'un des éléments de menu est cliqué,
alors il va générer un événement de clic et nous voulons que ces informations soient
livrées à notre fichier TypeScript composant de menu.
Donc, pour ce faire, nous allons entrer dans les listes de grille de menu que nous avons définies ici.
Pour cette grille ici,
ce que je vais faire est de définir l'événement click ici.
Donc, pour l'événement click,
ce que je vais faire est que je vais appeler sur la méthode
select que je vais définir dans mon fichier de menu component.ts.
Pour cette méthode onSelect,
Je vais fournir le plat comme paramètre ici.
Quel est ce plat ?
Ce plat est exactement ce plat que vous avez sélectionné dans
ce « plat de plats » dans la syntaxe ngFor ici.
Donc, ce plat spécifique,
sur le tableau de plats que vous avez sélectionné ici,
sera passé en paramètre à cette méthode onSelect,
ce que nous allons implémenter dans notre fichier de menu component.ts.
Donc, maintenant que nous avons fait cela,
donc c'est le gestionnaire qui doit être implémenté.
Allons au fichier de composant de menu, puis corrigeons
ce fichier pour implémenter ce gestionnaire là-dedans.
Donc, quand vous faites un clic sur l'un des éléments de menu,
alors la poignée correspondante sera appelée et
l'information spécifique du plat sera transmise en paramètre ici.
Aller au fichier component.ts du menu, maintenant,
le plat sélectionné recevra une valeur basée sur le plat que je sélectionne.
Donc, je vais supprimer cette partie et puis juste en bas ici,
je vais implémenter la méthode onSelect ici.
Donc, pour la méthode onSelect,
cela obtiendra un paramètre qui est le paramètre dish.
Quand ce paramètre de plat arrive,
Je vais assigner ce SelectedDish égal à plat,
le paramètre qui est entré comme valeur pour la méthode onSelect ici.
Alors, c'est ça.
Donc, lorsque vous cliquez sur l'un de ces éléments dans le menu,
n'importe quel plat dans le menu,
cette information sur le plat sera transmise à travers ceci et ensuite
le plat sélectionné sera attribué à cet objet plat ici.
Maintenant, nous avons comment l'information vient du DOM.
Le clic spécifique fera en sorte que les informations sur le plat à
soient disponibles pour nous et le plat sélectionné recevra cette valeur.
Maintenant, revenant au fichier HTML du composant de menu,
nous voyons que nous avons déjà attribué cette propriété de plat à SelectedDish.
Donc, de cette façon, cette valeur de plat sélectionnée est passée
via cette propriété de plat à cet app-dishdetail ici.
Maintenant, comment mon composant de détail de plat tient-il de cette information ?
Pour cela, nous allons aller au composant de détail du plat et corriger cela.
Aller au composant de détail de plat,
la première chose que je vais faire est de supprimer
cette constante de plat de mon composant de détail de plat.
Je n'en ai plus besoin.
Maintenant, quand une propriété est liée,
comme ce que nous avons vu dans le fichier HTML du composant de menu,
puis dans mon fichier de détail de plat,
je peux utiliser un autre module appelé Module d'entrée.
Alors, pour ce plat,
, je vais simplement déclarer cela en tant que DISH.
Maintenant, ce module d'entrée me permet de déclarer un décorateur
pour cette variable de plat que j'ai définie ici,
comme ceci, à l'entrée avec la parenthèse ici à ce plat.
Ensuite, aussi, j'ai besoin d'importer
la classe de plat
de plat partagé ici.
Donc, avec cela, donc ce qui s'est passé est que je fais usage du module d'entrée.
Donc, c'est un moyen pour vous de fournir des informations dans un composant à partir d'un autre composant.
Vous liez une propriété dans le modèle de
l'autre composant comme nous l'avons vu dans le fichier de menu component.html,
et ensuite cela sera disponible en entrée à ce composant en déclarant une variable, puis en appelant le décorateur d'entrée pour cela.
Maintenant, avec cela, sauvegardons les modifications apportées à tous les fichiers que nous avons fait
, puis jetez un oeil à la réplication angulaire.
En allant sur notre navigateur,
nous voyons que dans cette réplication angulaire,
rien n'est affiché ici.
Parce que maintenant, le plat sélectionné,
nous n'avons sélectionné aucun des plats donc aussi le plat sélectionné
est un objet vide là-bas.
Donc, nous utilisons le NGif dans le modèle pour le détail du plat.
Donc, en regardant rapidement le modèle de détails du plat,
vous avez implémenté ceci dans le cadre de votre mission.
Donc, vous auriez dû utiliser le NGif avec le plat à la fois pour le code,
ainsi que pour la liste MD là-bas.
Donc, si vous faites cela,
alors quand le plat est actuellement désélectionné,
alors rien ne sera affiché en bas.
Mais au moment où je clique sur l'un des plats,
, puis vous voyez immédiatement les détails du plat affiché en bas ici.
Maintenant, je peux sélectionner le deuxième plat et puis immédiatement,
, vous remarquerez que les détails du plat affichés ci-dessous sont modifiés.
Donc, chaque fois que je clique sur l'un de ces plats,
les détails de ce plat spécifique,
y compris les commentaires seront affichés en bas ici.
Donc, c'est exactement ce que nous voulons réaliser dans cet exercice particulier.
Donc, ici, vous avez vu l'utilisation de la liaison de données, trois types différents,
y compris le gestionnaire d'événement et d'événement,
et aussi vous avez vu comment nous pouvons utiliser le module d'entrée pour pouvoir
pour récupérer des informations dans un composant provenant d'un autre composant.
Avec cela, nous terminons cet exercice,
où nous avons appris à utiliser diverses fonctionnalités de liaison de données
disponibles dans Angular pour implémenter notre application.
C'est le bon moment pour vous de faire un commit git avec la liaison de données de message.