Continuons maintenant à travailler sur
l'application d'une seule page que nous avons développé dans nos exercices.
Jusqu'à présent, nous avons intégré le composant home,
le composant menu et le composant contact dans notre application d'une seule page.
Le composant de détail de plat est actuellement utilisé en bas du composant de menu.
Donc, lorsque vous cliquez sur l'un des éléments du menu,
les détails du plat sont affichés juste en dessous dans le menu.
Maintenant, nous allons tirer parti d'un autre support fourni par le module de routeur Angular,
qui nous permet de définir une route avec un paramètre inclus dans la définition de route.
De cette façon, nous pouvons transmettre des informations à un autre composant,
, puis à partir de là,
afficher des informations dans l'autre composant.
Comment cela fonctionne-t-il ?
Apprenons cela en faisant cet exercice.
Donc, pour revenir à notre application,
dans cette application, lorsque vous regardez le menu,
lorsque vous cliquez sur n'importe quel élément du menu,
les détails de l'élément sélectionné sont affichés juste en dessous dans le menu.
Maintenant, je voudrais séparer la vue des détails
de ce plat particulier dans sa propre vue séparée.
Quand je clique sur l'un de ceux-ci,
Je veux pouvoir afficher les détails du plat,
spécifiquement dans une vue dans cette application.
Pour y parvenir, nous allons profiter, comme je l'ai dit,
avec les paramètres de route pour nous permettre de supporter ce genre de comportement dans notre application.
Comment allons-nous faire ça ?
Faisons cela en commençant par définir une nouvelle route avec un paramètre ici.
Pour utiliser le composant de détail plat,
nous allons aller dans les routes,
puis définir un nouveau itinéraire après menu ici.
Regardez la façon dont l'itinéraire est défini ici.
Donc, c'est le chemin, le détail de la vaisselle.
Donc, ce détail de plat fait partie de la composante détail de plat.
Donc, il a sa propre vue.
Maintenant, je veux pouvoir naviguer vers cette vue,
mais avec un ID de paramètre,
parce que cette vue détaillée de plat peut afficher n'importe lequel des plats de mon menu.
Donc, je veux pouvoir afficher un plat sélectionné dans le détail du plat.
Maintenant, c'est le plat sélectionné aura un ID,
et je veux passer cet ID dans mes composants détaillés de plat,
afin qu'il puisse rendre les détails de ce plat particulier.
Donc, dans le routeur angulaire,
il prend en charge le passage de paramètres en définissant des paramètres de route comme celui-ci,
dans la définition du routeur lui-même.
Donc, dans le chemin,
si je dis deux-points,
pour que deux-points puisse être suivi d'un nom qui agira comme paramètre de route.
Donc, dans ce cas, je vais utiliser le nom du paramètre comme ID.
Cette ID fait référence à l'ID plat que nous avons déjà donné à chacun de nos plats.
Maintenant, cela va me conduire à la composante détail du plat.
Donc, nous allons ajouter dans cette nouvelle route à notre définition de route angulaire ici.
Enregistrer les modifications.
Maintenant, dans le composant de menu,
donc quand j'ouvre le fichier de modèle de composants de menu,
dans le composant de menu,
j'affiche le plat en bas ici.
Alors, je ne veux pas faire ça.
Donc, je vais supprimer cette partie de mon modèle de composants de menu.
Au lieu de cela, je me rends compte que juste là,
je suis capable d'accéder au plat particulier.
Donc, quand on clique sur le plat,
au lieu de faire ce clic ici,
donc je vais supprimer ce clic ici, et à la place,
je vais définir un nouveau paramètre ici appelé RouterLink.
Vous verrez l'utilisation du RouterLink ici.
Maintenant, ce RouterLink prend des valeurs que vous pouvez fournir dans votre modèle comme celui-ci.
Donc, vous pouvez fournir cela comme un tableau ici.
Dans le tableau, vous pouvez fournir deux parties d'un tableau.
Donc, détail de la vaisselle.
Donc, vous avez vu que quand j'ai défini l'itinéraire, j'ai dit « /dishdetail/:id ».
Donc, le routeur angulaire passera dans n'importe quel paramètre que je fournis
ici dans le cadre de la deuxième partie de cette URL là-bas.
Donc, maintenant, avec le détail du plat,
, je vais construire mon RouterLink en utilisant le détail du plat,
et aussi l'ID du plat ici.
Donc, cet ID de plat se réfère au plat spécifique que j'ai
sélectionné dans la gamme de plats ici.
Donc, ce plat ID,
J'ai accès ici.
Donc, je vais l'utiliser comme deuxième partie dans ce tableau de paramètres,
que je vais passer pour mon RouterLink ici.
Donc, si je le définit comme ça,
alors quand je clique sur cet élément particulier dans mon menu,
puis ce détail, l'ID du plat,
avec ce dishdetail,
sera passé comme le lien du routeur.
Donc, cette information sera maintenant disponible via
mes routeurs angulaires à mes composants de détail plat.
Ainsi, le routeur permet au composant de détail de plat de récupérer cette valeur,
ID de plat, de la route angulaire lorsque cette information y est transmise.
Comment faisons-nous ça ? Pour cela,
nous devons aller au composant de détail plat et corriger cela pour recevoir cette information.
Donc, après avoir apporté ces modifications au composant de menu,
passons maintenant au composant de détail de plat.
A l'intérieur du composant de détail du plat,
vous voyez qu'actuellement,
je recevais le plat comme entrée ici.
Je ne vais plus recevoir la vaisselle et l'entrée.
Donc, je vais juste laisser cela en tant que tel,
comme simplement un plat.
Je n'ai plus besoin de l'entrée parce que je ne transmets pas cette information en utilisant le plat,
entre crochets que j'ai inclus dans mon composant de menu.
Au lieu de cela, cette information sur les plats spécifiques entrant par le routeur Angular.
Comment puis-je avoir accès à ce plat ID ?
Donc, pour faire ça,
Je vais ici.
Dans cette application, je vais ajouter deux autres importations ici,
l'une d'entre elles appelée Params.
Donc, ce Params me donne accès à
les paramètres du routeur qui sont disponibles quand je viens.
Donc, ceci vient du routeur angulaire, Params,
et aussi un autre dont j'ai besoin est l'emplacement.
Location me permet de suivre l'emplacement de
ma page dans l'historique de mon navigateur.
Donc, cela serait utile pour moi de revenir à partir de mes détails de plat quand j'en ai besoin.
Vous me verrez utiliser ça un peu plus tard.
Donc, deux choses que j'ai besoin d'importer : Params et Location.
Nous verrons comment nous utilisons ces deux dans notre application.
Donc, avec cela,
nous allons entrer et entrer ici, pour le constructeur,
maintenant nous notons que la valeur du plat n'est maintenant pas disponible à partir de mon composant de menu.
Mais au lieu de cela, je dois aller explicitement chercher ceci du DishService.
Donc, je vais importer
le DishService aussi dans mon composant de détail de plat.
DishService ici.
Donc, cela me permettra d'aller chercher un plat spécifique auprès du Service Dish.
Donc, vous vous rappelez que nous avons déjà
la méthode GetDish et le Service Dish que nous pouvons utiliser.
Maintenant, la prochaine chose importante pour nous est de mettre la main sur l'identifiant du plat.
Maintenant, comment pouvons-nous obtenir l'identifiant du plat.
Donc, c'est là que dans le constructeur.
Maintenant, je dois rendre tous ces services disponibles,
donc je dirai Service de vaisselle.
Alors, l'autre est Location.
Donc, Location est un autre service qui est disponible pour moi.
Donc, les deux seront utilisés dans mon application.
Donc, quand ce composant de plat est initialisé,
puis à ce stade dans le NgonInit,
je peux aller chercher les informations sur le plat spécifique des Params.
Alors, comment faisons-nous ça ? Donc, nous laissons id.
Donc, c'est là que je vais chercher l'identifiant,
donc je dirais plus ceci.
Aussi pour récupérer la valeur de la route,
J'ai besoin d'injecter un autre service appelé service ActivatedRoute.
Cela fait partie des routeurs angulaires.
Donc, ce service ActivatedRoute me donne accès à l'itinéraire ici.
Donc, je dirais,
donc avec le DishService, j'ai également besoin de définir un autre appelé
comme route qui serait le service ActivatedRoute ici.
Donc, tous ces trois seront disponibles pour moi.
Donc juste là, je peux demander
cette route, Snapshot, Params.
Ce Params est un tableau à
que je peux indexer en utilisant l'id comme valeur, donc Params id.
Cela me récupère l'id du paramètre.
Donc, quand je définis cette URL,
l'URL pour cela serait définie comme Dishdetail.
Par exemple, DishDetail 0,
DishDetail 1, DishDetail 2, etc.
Donc, c'est ainsi que les URL de ces composants vont y être définies.
Donc, cette valeur que je vais chercher ici.
Maintenant, une fois que j'ai eu l'idée du plat, alors je peux dire,
ce plat égal à DishService
et obtenir plat et le GetDish prendra l'id comme paramètre ici.
Donc, avec ceci, quand je clique sur un plat dans mon composant de menu,
ce lien que j'ai le lien de routeur que j'ai configuré là,
passera l'identifiant de plat à mon routeur en tant que RouterParameter,
et qui deviendra disponible pour moi dans
mon composant DishDetail en accédant au service ici.
Donc, une fois que j'en ai la main,
alors je peux utiliser cette valeur pour interroger le plat ici.
Maintenant, ce n'est pas la façon complète de faire les choses.
Plus tard dans le module suivant,
, nous allons utiliser quelque chose appelé JavaScript réactif.
Alors, à ce moment-là, je reviendrai redéfinir ceci dans
d'une manière différente afin que mon composant DishDetail puisse suivre
toutes les modifications que j'apporte à mon URL et
modifie automatiquement les informations affichées par ce composant.
Nous y arriverons dans l'un des exercices ultérieurs du module suivant,
mais cela fonctionne bien pour le moment donc nous allons l'utiliser.
De plus, maintenant quand je vais aux détails du plat
, je veux pouvoir revenir au menu du plat.
Donc, je vais ajouter un bouton de retour dans ma carte un bouton de retour dans ma carte,
qui, une fois appuyé, me ramènera à l'emplacement précédent dans mon navigateur.
Donc, pour ce faire, je vais ajouter une méthode ici appelée GoBack,
qui fera essentiellement usage
du service Location que j'ai inclus ici.
Le service Location fournit une méthode appelée Back qui me permet de revenir
dans l'élément précédent de l'historique du navigateur.
Donc, de cette façon, je vais revenir au menu à partir des détails ici.
Donc, cette méthode GoBack est ajoutée ici.
Maintenant, nous devons aller réparer le composant DishDetail ici.
Donc, dans le fichier modèle de composants DishDetail,
ici, nous avons deux boutons qui sont le bouton Like et Partager.
Je vais ajouter un bouton de plus ici.
Pour ce bouton, j'ajouterais,
si ce bouton est cliqué,
cela entraînera un appel à la méthode GoBack que je viens d'ajouter à mon DishDetail component.tsfile.
Donc, ce serait un bouton Retour là-bas.
Pendant que nous y sommes,
nous pourrions aussi bien réparer les liens des composants du pied de page.
Donc, en allant au fichier footercomponent.htmlfile en bas ici où nous avons ces liens,
Je vais ajouter dans le RouterLink ici avec
le paramètre home pour le premier,
, puis menu pour le second,
et contactez-nous pour le troisième dans le pied de page ici.
Sauvegardons les modifications.
Aller à votre application,
si vous cliquez maintenant sur le menu,
les éléments de menu sont affichés ici.
Si nous cliquons sur l'un des éléments du menu,
vous remarquerez que les détails du plat sont affichés dans une vue séparée ici.
Ces détails, comme vous pouvez le voir,
c'est exactement ce que le composant DishDetail affichait plus tôt,
mais au bas du menu dans le composant de menu,
nous avons maintenant que l'affichage dans une vue séparée.
Maintenant, ce composant DishDetail,
maintenant vous pouvez revenir au menu en cliquant sur le bouton Précédent.
Donc, lorsque vous cliquez sur le bouton Précédent,
vous êtes de retour au menu.
Lorsque vous cliquez sur un autre élément,
vous voyez que les détails de cet élément particulier sont affichés ici,
de même pour le troisième aussi et vous pouvez revenir en arrière.
Maintenant, lorsque vous cliquez sur l'un de ces éléments,
notez la valeur de l'URL dans la barre d'adresse.
Donc, c'est l'hôte local 4,200 slash DishDetail slash 0.
Ce zéro est l'identifiant de ce plat.
Donc, cette valeur est passée,
et c'est ainsi que le composant DishDetail est montré ici, revenez.
Lorsque vous cliquez sur l'autre élément,
vous pouvez voir que maintenant dans les URL dit, DishDetail barre oblique 1.
De même, pour le quatrième,
, il est dit DishDetail barre oblique 3, et ainsi de suite.
Donc, cette valeur Parameter est celle qui indique à
le composant DishDetail quel plat particulier
doit être affiché par le composant DishDetail.
C'est ce qui est utilisé par le composant DishDetail pour récupérer les informations sur
ce plat spécifique du DishService en utilisant la méthode GetDish,
et ensuite ces informations sont affichées dans la vue du composant DishDetail.
Donc, maintenant dans cet exercice,
nous avons appris comment nous pouvons utiliser RouteParameters pour transmettre des informations à un composant,
, puis le composant obtenir l'accès au Paramètre, puis utilise ce RouteParameter
pour décider de la façon dont il rend
la vue ou récupère l'information et rendre la vue en conséquence.
Avec cela, nous terminons cet exercice.
Nous avons presque terminé la construction de notre application
d'une seule page pour l'application restaurant sur laquelle nous avons travaillé jusqu'à présent.
C'est le bon moment pour vous de faire un commit git avec le message,
Partie 2 de l'application d'une seule page.