1
00:00:00,000 --> 00:00:04,740
[MUSIC]

2
00:00:04,740 --> 00:00:09,772
En utilisant le routeur angulaire, nous avons déjà appris comment naviguer

3
00:00:09,772 --> 00:00:15,673
d'une vue à une autre en utilisant la directive de liaison du routeur pour spécifier le lien.

4
00:00:15,673 --> 00:00:21,823
Et aussi le module routeur, nous permettant avec la spécification du chemin,

5
00:00:21,823 --> 00:00:26,715
de naviguer vers les vues des différents composants.

6
00:00:26,715 --> 00:00:31,265
Maintenant, prenons un exemple du composant dishdetail.

7
00:00:31,265 --> 00:00:36,680
Jusqu'à présent, le composant dishdetail a fonctionné en recevant les détails

8
00:00:36,680 --> 00:00:42,270
du plat spécifique qu'il doit afficher à partir du composant menu.

9
00:00:42,270 --> 00:00:47,211
Mais cela a été facilité parce que le composant dishdetail avait une propriété

10
00:00:47,211 --> 00:00:49,290
qui envoyait la valeur.

11
00:00:49,290 --> 00:00:52,201
Et puis nous utilisions le décorateur d'entrée pour

12
00:00:52,201 --> 00:00:57,027
la variable à l'intérieur du composant dishdetail pour obtenir la valeur que

13
00:00:57,027 --> 00:01:00,800
était passée à partir du composant de menu.

14
00:01:00,800 --> 00:01:06,120
Maintenant, lorsque ces composants sont routés à l'aide d'un routeur,

15
00:01:06,120 --> 00:01:10,440
cette connexion entre les composants n'existe plus.

16
00:01:10,440 --> 00:01:13,995
Nous devons donc tirer parti du Routeur angulaire pour pouvoir transmettre des informations

17
00:01:13,995 --> 00:01:17,560
d'un composant à l'autre.

18
00:01:17,560 --> 00:01:22,140
Et cela se fait généralement sous la forme de paramètres.

19
00:01:22,140 --> 00:01:25,940
Paramètres qui peuvent être spécifiés comme paramètres de route,

20
00:01:25,940 --> 00:01:29,600
comme nous l'apprendrons un peu plus tard, ou paramètres de requête.

21
00:01:31,480 --> 00:01:34,320
Donc, pour le Routeur Angulaire, ce que nous avons appris jusqu'à

22
00:01:34,320 --> 00:01:38,890
loin est que les chemins sont tous spécifiés comme une URL.

23
00:01:38,890 --> 00:01:43,532
Supposons que vous ayez besoin de passer une valeur de paramètre d'un composant à

24
00:01:43,532 --> 00:01:44,980
un autre composant.

25
00:01:44,980 --> 00:01:46,820
Alors comment faisons-nous ça ?

26
00:01:46,820 --> 00:01:50,550
Maintenant, la seule façon de communiquer entre les composants

27
00:01:50,550 --> 00:01:52,125
est d'utiliser le lien du routeur.

28
00:01:52,125 --> 00:01:54,570
et/ou

29
00:01:54,570 --> 00:01:58,820
utiliser le module de routeur pour faire la navigation d'un composant à un autre composant.

30
00:01:58,820 --> 00:02:06,370
Maintenant, c'est là que la possibilité de spécifier des valeurs de paramètre dans l'URL pour

31
00:02:06,370 --> 00:02:12,070
un composant, le chemin d'accès d'un composant, nous permet de transmettre cette information.

32
00:02:12,070 --> 00:02:16,690
Donc, par exemple, si nous voulons être en mesure d'afficher un plat

33
00:02:16,690 --> 00:02:20,450
avec un id 42 dans le composant dishdetail.

34
00:02:20,450 --> 00:02:25,680
Si nous avions la possibilité de spécifier quelque chose comme /dishdetail/42.

35
00:02:25,680 --> 00:02:31,780
Et puis laissez le plat ramasser le numéro 42 de l'URL directement.

36
00:02:31,780 --> 00:02:37,000
Ensuite, nous avons facilité un mécanisme pour transmettre cette information

37
00:02:37,000 --> 00:02:42,710
un composant à un autre lorsque nous naviguons vers l'autre composant.

38
00:02:42,710 --> 00:02:47,389
C'est ce que dans le module Angular Router est appelé un paramètre de route.

39
00:02:48,560 --> 00:02:50,400
Comment fonctionne un paramètre d'itinéraire ?

40
00:02:50,400 --> 00:02:54,410
Donc, lorsque vous spécifiez un paramètre d'itinéraire dans la définition du chemin,

41
00:02:54,410 --> 00:02:57,260
ce paramètre d'itinéraire est spécifié à l'aide d'un jeton.

42
00:02:57,260 --> 00:03:02,300
Donc, lorsque vous spécifiez le chemin dans la spécification de chemin pour

43
00:03:02,300 --> 00:03:05,600
les routes, vous spécifiez un chemin comme celui-ci.

44
00:03:05,600 --> 00:03:09,952
Donc, vous diriez, dishdetail/:id.

45
00:03:09,952 --> 00:03:14,750
Alors où id devient le jeton qui porte le paramètre route

46
00:03:14,750 --> 00:03:18,359
au composant spécifique.

47
00:03:18,359 --> 00:03:21,200
Composant dishdetail dans cet exemple.

48
00:03:21,200 --> 00:03:25,002
Ainsi, vous pouvez spécifier un paramètre d'itinéraire dans le chemin.

49
00:03:25,002 --> 00:03:30,098
Et puis à partir d'un autre emplacement, vous pouvez passer le paramètre

50
00:03:30,098 --> 00:03:34,810
au composant particulier qui a besoin de ce paramètre.

51
00:03:34,810 --> 00:03:37,240
Composant dishdetail dans cet exemple.

52
00:03:38,810 --> 00:03:42,510
Maintenant, la prochaine question importante qui se posera dans votre esprit est :

53
00:03:42,510 --> 00:03:44,610
comment passons-nous ce paramètre de route ?

54
00:03:44,610 --> 00:03:50,134
Maintenant, quand vous y penserez, quand vous naviguerez dans le composant dishdetail.

55
00:03:50,134 --> 00:03:55,255
Vous venez d'un autre composant en cliquant sur un lien ou en utilisant

56
00:03:55,255 --> 00:04:01,020
quelque chose appelé la fonction de navigation comme le module de route nous fournit.

57
00:04:01,020 --> 00:04:06,240
Nous allons examiner les deux façons de naviguer vers un composant particulier.

58
00:04:06,240 --> 00:04:11,222
Maintenant, si vous avez besoin de spécifier le paramètre de route, lorsque vous spécifiez le lien,

59
00:04:11,222 --> 00:04:16,070
rappelez-vous que nous spécifiions le lien en utilisant la directive routeur link

60
00:04:16,070 --> 00:04:20,750
dans nos fichiers de modèle.

61
00:04:20,750 --> 00:04:23,470
Maintenant, si vous allez spécifier cela dans les fichiers de modèle,

62
00:04:23,470 --> 00:04:29,040
alors le lien du routeur prend également un tableau comme nous le voyons.

63
00:04:29,040 --> 00:04:31,500
Un tableau de paramètres de liaison,

64
00:04:31,500 --> 00:04:35,170
où vous pouvez spécifier explicitement le paramètre qui est transmis.

65
00:04:35,170 --> 00:04:40,480
Ainsi, par exemple, dans cet exemple que vous voyez ici, nous spécifions un.

66
00:04:40,480 --> 00:04:42,850
Et puis vous faites un ngFor.

67
00:04:42,850 --> 00:04:47,723
Donc, vous bouclez un ensemble d'objets JavaScript dans

68
00:04:47,723 --> 00:04:50,720
un tableau d'objets JavaScript.

69
00:04:50,720 --> 00:04:52,860
Ensuite, lorsque vous spécifiez le lien du routeur.

70
00:04:52,860 --> 00:04:55,770
Ainsi, à l'intérieur, vous pouvez spécifier le lien du routeur.

71
00:04:55,770 --> 00:04:58,260
Mais maintenant, entouré de crochets.

72
00:04:58,260 --> 00:05:05,150
Et cela prendra une valeur comme celle-ci a un tableau de paramètres de lien.

73
00:05:05,150 --> 00:05:08,768
Donc ici, vous pouvez spécifier différentes parties du paramètre link.

74
00:05:08,768 --> 00:05:15,370
Et Angular Router les rejoindra pour former l'URL réelle.

75
00:05:15,370 --> 00:05:19,300
Donc ici, vous pouvez voir que la première partie du paramètre de lien est spécifiée

76
00:05:19,300 --> 00:05:23,640
comme une chaîne ici, donc /dishdetail ici.

77
00:05:23,640 --> 00:05:28,970
Mais la deuxième partie est spécifiée comme une valeur qui est obtenue

78
00:05:28,970 --> 00:05:30,070
du plat.

79
00:05:31,130 --> 00:05:38,710
Quel est le plat, l'objet JavaScript du tableau d'objets JavaScript ici.

80
00:05:38,710 --> 00:05:41,204
Donc chaque plat portera un dish.id.

81
00:05:41,204 --> 00:05:44,090
Ainsi, le dish.id peut être spécifié comme

82
00:05:44,090 --> 00:05:47,640
une des valeurs dans ce tableau de paramètres de lien ici.

83
00:05:47,640 --> 00:05:52,170
Donc, lorsque vous cliquez dessus, pour le plat spécifique,

84
00:05:52,170 --> 00:05:57,130
ce dish.id sera remplacé par l'id spécifique pour le plat.

85
00:05:57,130 --> 00:06:01,890
Donc, par exemple, si l'id est 42, alors cela sera remplacé par 42.

86
00:06:01,890 --> 00:06:06,779
Donc, lorsque le routeur angulaire reçoit ce lien de routeur,

87
00:06:06,779 --> 00:06:11,783
alors il construira l'URL comme /dishdetail/42.

88
00:06:11,783 --> 00:06:17,010
Le 42 étant la valeur du dish.id à ce stade.

89
00:06:17,010 --> 00:06:19,630
Donc, c'est ainsi que vous pouvez passer le paramètre.

90
00:06:19,630 --> 00:06:21,500
La deuxième partie de la question, bien sûr,

91
00:06:21,500 --> 00:06:27,790
est comment le composant récupère cette valeur du paramètre link ?

92
00:06:27,790 --> 00:06:30,130
dont nous parlerons dans la diapositive suivante.

93
00:06:31,320 --> 00:06:36,380
Une autre façon de provoquer cette navigation vers l'autre composant

94
00:06:36,380 --> 00:06:42,380
est également d'utiliser une méthode appelée navigation qui est fournie par le module routeur.

95
00:06:42,380 --> 00:06:44,740
Donc, vous pouvez dire, this.router.navigate.

96
00:06:44,740 --> 00:06:47,888
Donc cela peut être inclus dans votre code TypeScript ou

97
00:06:47,888 --> 00:06:53,250
votre code JavaScript pour provoquer automatiquement la navigation vers l'autre.

98
00:06:53,250 --> 00:06:58,337
Donc, cela pourrait être inclus dans une méthode que vous

99
00:06:58,337 --> 00:07:03,432
incluez dans le code TypeScript de votre composant.

100
00:07:03,432 --> 00:07:08,575
Et cela peut être invoqué à partir de votre modèle.

101
00:07:08,575 --> 00:07:11,921
Dites, par exemple, en cliquant sur un lien là-bas.

102
00:07:11,921 --> 00:07:17,097
Donc, dans le code, vous pouvez inclure une instruction comme celle-ci,

103
00:07:17,097 --> 00:07:19,582
this.router.navigate.

104
00:07:19,582 --> 00:07:24,152
Et cette méthode de navigation prend le même tableau de paramètres de lien

105
00:07:24,152 --> 00:07:27,466
que la valeur du paramètre.

106
00:07:27,466 --> 00:07:33,056
Ainsi, cela permettra également de fournir ces informations au Routeur Angulaire afin que

107
00:07:33,056 --> 00:07:37,186
puisse naviguer vers l'autre composant.

108
00:07:37,186 --> 00:07:43,246
Maintenant, allons de l'autre côté de cette équation.

109
00:07:43,246 --> 00:07:50,466
Comment un composant, comme le composant dishdetail dans cet exemple,

110
00:07:50,466 --> 00:07:57,821
récupère cette valeur qui est spécifiée comme jeton dans le lien URL ?

111
00:07:57,821 --> 00:08:02,789
Maintenant, c'est là que la bibliothèque Angular Router fournit

112
00:08:02,789 --> 00:08:07,940
un service appelé service ActivatedRoute.

113
00:08:07,940 --> 00:08:12,913
Ce service ActivatedRoute peut être utilisé pour être en mesure de récupérer

114
00:08:12,913 --> 00:08:14,360
ces valeurs.

115
00:08:14,360 --> 00:08:18,556
Maintenant, en particulier, pour faciliter cette récupération de paramètres,

116
00:08:18,556 --> 00:08:22,689
le service ActivatedRoute fournit trois choses différentes.

117
00:08:22,689 --> 00:08:29,140
Par exemple, il fournit cette méthode pour récupérer l'URL.

118
00:08:29,140 --> 00:08:32,198
Ce qui est un observable du chemin de route.

119
00:08:32,198 --> 00:08:37,085
qui est représenté comme un tableau de chaînes pour chaque chemin d'itinéraire.

120
00:08:37,085 --> 00:08:39,271
Vous avez rencontré ce mot observable ici.

121
00:08:39,271 --> 00:08:41,770
Pour le moment, maintenez ce mot.

122
00:08:41,770 --> 00:08:46,250
Nous reviendrons, regardez ce qu'est un observable dans le module suivant.

123
00:08:46,250 --> 00:08:49,190
Mais pour le moment, ce que nous avons réalisé est que ce service

124
00:08:49,190 --> 00:08:52,430
ActivatedRoute fournit ce service observable.

125
00:08:53,970 --> 00:08:58,920
De même, le service ActivatedRoute fournit également un autre observable appelé params.

126
00:08:58,920 --> 00:09:03,920
Ce params observable met à la disposition d'un composant

127
00:09:03,920 --> 00:09:07,990
les valeurs de paramètre qui sont passées en tant que paramètre de route.

128
00:09:07,990 --> 00:09:12,260
Donc, ce paramètre observable est celui que nous allons utiliser

129
00:09:12,260 --> 00:09:15,740
pour récupérer cette valeur dans le composant dishdetail.

130
00:09:15,740 --> 00:09:18,290
Vous verrez la méthode exacte de faire cela

131
00:09:18,290 --> 00:09:21,860
dans l'exercice qui suit cette conférence.

132
00:09:21,860 --> 00:09:29,740
De même, vous pouvez également transmettre des paramètres de requête à un autre composant.

133
00:09:29,740 --> 00:09:33,185
Maintenant, nous ne allons pas traiter d'exemple des paramètres de requête en ce moment.

134
00:09:33,185 --> 00:09:39,480
Mais plus tard, nous pourrions rencontrer un exemple de la façon dont vous pouvez transmettre les paramètres de requête

135
00:09:39,480 --> 00:09:46,010
via le service ActivatedRoute à un autre composant.

136
00:09:46,010 --> 00:09:50,870
Avec cette compréhension, passons à l'exercice suivant.

137
00:09:50,870 --> 00:09:54,790
Nous continuerons à développer l'application d'une seule page.

138
00:09:54,790 --> 00:09:59,517
Et puis activez l'utilisation d'un paramètre de route pour passer

139
00:09:59,517 --> 00:10:03,605
l'id d'un plat au composant dishdetail.

140
00:10:03,605 --> 00:10:09,990
Pour que le composant dishdetail, à son tour, puisse utiliser cet identifiant pour interroger le service de plat.

141
00:10:09,990 --> 00:10:14,280
Pour obtenir les détails de ce plat spécifique qu'il est

142
00:10:14,280 --> 00:10:17,406
censé afficher dans sa vue.

143
00:10:17,406 --> 00:10:24,269
[MUSIQUE]