[MUSIC]
En utilisant le routeur angulaire, nous avons déjà appris comment naviguer
d'une vue à une autre en utilisant la directive de liaison du routeur pour spécifier le lien.
Et aussi le module routeur, nous permettant avec la spécification du chemin,
de naviguer vers les vues des différents composants.
Maintenant, prenons un exemple du composant dishdetail.
Jusqu'à présent, le composant dishdetail a fonctionné en recevant les détails
du plat spécifique qu'il doit afficher à partir du composant menu.
Mais cela a été facilité parce que le composant dishdetail avait une propriété
qui envoyait la valeur.
Et puis nous utilisions le décorateur d'entrée pour
la variable à l'intérieur du composant dishdetail pour obtenir la valeur que
était passée à partir du composant de menu.
Maintenant, lorsque ces composants sont routés à l'aide d'un routeur,
cette connexion entre les composants n'existe plus.
Nous devons donc tirer parti du Routeur angulaire pour pouvoir transmettre des informations
d'un composant à l'autre.
Et cela se fait généralement sous la forme de paramètres.
Paramètres qui peuvent être spécifiés comme paramètres de route,
comme nous l'apprendrons un peu plus tard, ou paramètres de requête.
Donc, pour le Routeur Angulaire, ce que nous avons appris jusqu'à
loin est que les chemins sont tous spécifiés comme une URL.
Supposons que vous ayez besoin de passer une valeur de paramètre d'un composant à
un autre composant.
Alors comment faisons-nous ça ?
Maintenant, la seule façon de communiquer entre les composants
est d'utiliser le lien du routeur.
et/ou
utiliser le module de routeur pour faire la navigation d'un composant à un autre composant.
Maintenant, c'est là que la possibilité de spécifier des valeurs de paramètre dans l'URL pour
un composant, le chemin d'accès d'un composant, nous permet de transmettre cette information.
Donc, par exemple, si nous voulons être en mesure d'afficher un plat
avec un id 42 dans le composant dishdetail.
Si nous avions la possibilité de spécifier quelque chose comme /dishdetail/42.
Et puis laissez le plat ramasser le numéro 42 de l'URL directement.
Ensuite, nous avons facilité un mécanisme pour transmettre cette information
un composant à un autre lorsque nous naviguons vers l'autre composant.
C'est ce que dans le module Angular Router est appelé un paramètre de route.
Comment fonctionne un paramètre d'itinéraire ?
Donc, lorsque vous spécifiez un paramètre d'itinéraire dans la définition du chemin,
ce paramètre d'itinéraire est spécifié à l'aide d'un jeton.
Donc, lorsque vous spécifiez le chemin dans la spécification de chemin pour
les routes, vous spécifiez un chemin comme celui-ci.
Donc, vous diriez, dishdetail/:id.
Alors où id devient le jeton qui porte le paramètre route
au composant spécifique.
Composant dishdetail dans cet exemple.
Ainsi, vous pouvez spécifier un paramètre d'itinéraire dans le chemin.
Et puis à partir d'un autre emplacement, vous pouvez passer le paramètre
au composant particulier qui a besoin de ce paramètre.
Composant dishdetail dans cet exemple.
Maintenant, la prochaine question importante qui se posera dans votre esprit est :
comment passons-nous ce paramètre de route ?
Maintenant, quand vous y penserez, quand vous naviguerez dans le composant dishdetail.
Vous venez d'un autre composant en cliquant sur un lien ou en utilisant
quelque chose appelé la fonction de navigation comme le module de route nous fournit.
Nous allons examiner les deux façons de naviguer vers un composant particulier.
Maintenant, si vous avez besoin de spécifier le paramètre de route, lorsque vous spécifiez le lien,
rappelez-vous que nous spécifiions le lien en utilisant la directive routeur link
dans nos fichiers de modèle.
Maintenant, si vous allez spécifier cela dans les fichiers de modèle,
alors le lien du routeur prend également un tableau comme nous le voyons.
Un tableau de paramètres de liaison,
où vous pouvez spécifier explicitement le paramètre qui est transmis.
Ainsi, par exemple, dans cet exemple que vous voyez ici, nous spécifions un.
Et puis vous faites un ngFor.
Donc, vous bouclez un ensemble d'objets JavaScript dans
un tableau d'objets JavaScript.
Ensuite, lorsque vous spécifiez le lien du routeur.
Ainsi, à l'intérieur, vous pouvez spécifier le lien du routeur.
Mais maintenant, entouré de crochets.
Et cela prendra une valeur comme celle-ci a un tableau de paramètres de lien.
Donc ici, vous pouvez spécifier différentes parties du paramètre link.
Et Angular Router les rejoindra pour former l'URL réelle.
Donc ici, vous pouvez voir que la première partie du paramètre de lien est spécifiée
comme une chaîne ici, donc /dishdetail ici.
Mais la deuxième partie est spécifiée comme une valeur qui est obtenue
du plat.
Quel est le plat, l'objet JavaScript du tableau d'objets JavaScript ici.
Donc chaque plat portera un dish.id.
Ainsi, le dish.id peut être spécifié comme
une des valeurs dans ce tableau de paramètres de lien ici.
Donc, lorsque vous cliquez dessus, pour le plat spécifique,
ce dish.id sera remplacé par l'id spécifique pour le plat.
Donc, par exemple, si l'id est 42, alors cela sera remplacé par 42.
Donc, lorsque le routeur angulaire reçoit ce lien de routeur,
alors il construira l'URL comme /dishdetail/42.
Le 42 étant la valeur du dish.id à ce stade.
Donc, c'est ainsi que vous pouvez passer le paramètre.
La deuxième partie de la question, bien sûr,
est comment le composant récupère cette valeur du paramètre link ?
dont nous parlerons dans la diapositive suivante.
Une autre façon de provoquer cette navigation vers l'autre composant
est également d'utiliser une méthode appelée navigation qui est fournie par le module routeur.
Donc, vous pouvez dire, this.router.navigate.
Donc cela peut être inclus dans votre code TypeScript ou
votre code JavaScript pour provoquer automatiquement la navigation vers l'autre.
Donc, cela pourrait être inclus dans une méthode que vous
incluez dans le code TypeScript de votre composant.
Et cela peut être invoqué à partir de votre modèle.
Dites, par exemple, en cliquant sur un lien là-bas.
Donc, dans le code, vous pouvez inclure une instruction comme celle-ci,
this.router.navigate.
Et cette méthode de navigation prend le même tableau de paramètres de lien
que la valeur du paramètre.
Ainsi, cela permettra également de fournir ces informations au Routeur Angulaire afin que
puisse naviguer vers l'autre composant.
Maintenant, allons de l'autre côté de cette équation.
Comment un composant, comme le composant dishdetail dans cet exemple,
récupère cette valeur qui est spécifiée comme jeton dans le lien URL ?
Maintenant, c'est là que la bibliothèque Angular Router fournit
un service appelé service ActivatedRoute.
Ce service ActivatedRoute peut être utilisé pour être en mesure de récupérer
ces valeurs.
Maintenant, en particulier, pour faciliter cette récupération de paramètres,
le service ActivatedRoute fournit trois choses différentes.
Par exemple, il fournit cette méthode pour récupérer l'URL.
Ce qui est un observable du chemin de route.
qui est représenté comme un tableau de chaînes pour chaque chemin d'itinéraire.
Vous avez rencontré ce mot observable ici.
Pour le moment, maintenez ce mot.
Nous reviendrons, regardez ce qu'est un observable dans le module suivant.
Mais pour le moment, ce que nous avons réalisé est que ce service
ActivatedRoute fournit ce service observable.
De même, le service ActivatedRoute fournit également un autre observable appelé params.
Ce params observable met à la disposition d'un composant
les valeurs de paramètre qui sont passées en tant que paramètre de route.
Donc, ce paramètre observable est celui que nous allons utiliser
pour récupérer cette valeur dans le composant dishdetail.
Vous verrez la méthode exacte de faire cela
dans l'exercice qui suit cette conférence.
De même, vous pouvez également transmettre des paramètres de requête à un autre composant.
Maintenant, nous ne allons pas traiter d'exemple des paramètres de requête en ce moment.
Mais plus tard, nous pourrions rencontrer un exemple de la façon dont vous pouvez transmettre les paramètres de requête
via le service ActivatedRoute à un autre composant.
Avec cette compréhension, passons à l'exercice suivant.
Nous continuerons à développer l'application d'une seule page.
Et puis activez l'utilisation d'un paramètre de route pour passer
l'id d'un plat au composant dishdetail.
Pour que le composant dishdetail, à son tour, puisse utiliser cet identifiant pour interroger le service de plat.
Pour obtenir les détails de ce plat spécifique qu'il est
censé afficher dans sa vue.
[MUSIQUE]