1
00:00:03,680 --> 00:00:10,440
Maintenant que vous avez mouillé vos pieds avec des observables angulaires dans l'exercice précédent,

2
00:00:10,440 --> 00:00:11,860
vous regardez en arrière et dites,

3
00:00:11,860 --> 00:00:14,320
« Oh observables ne sont pas si mauvais après tout,

4
00:00:14,320 --> 00:00:17,070
ils sont assez simples à utiliser. »

5
00:00:17,070 --> 00:00:19,125
Donc, nous sommes un peu plus ambitieux.

6
00:00:19,125 --> 00:00:25,080
Allons un peu plus loin, puis faisons usage d'un observable intégré dans Angular.

7
00:00:25,080 --> 00:00:27,960
Les params observables qui proviennent de

8
00:00:27,960 --> 00:00:32,655
le service de route activé dans notre module routeur.

9
00:00:32,655 --> 00:00:35,940
Nous allons maintenant mettre à jour le composant de détail de plat,

10
00:00:35,940 --> 00:00:39,630
pour utiliser les paramètres observables de

11
00:00:39,630 --> 00:00:42,770
le service de sécheresse activateur à

12
00:00:42,770 --> 00:00:47,975
prendre en charge de nouvelles fonctionnalités dans notre application Angular.

13
00:00:47,975 --> 00:00:52,400
Avant de passer à la mise à jour du composant Dish detail,

14
00:00:52,400 --> 00:00:57,650
Je veux introduire une autre méthode dans mon fichier Dish service.ts.

15
00:00:57,650 --> 00:01:02,735
Alors ouvrez le fichier vaisselle service.ts et ensuite nous allons ajouter une nouvelle méthode appelée

16
00:01:02,735 --> 00:01:08,060
getDishids et cela va fondamentalement

17
00:01:08,060 --> 00:01:14,715
retourner tous les ID de plat est pour tous les plats de notre collection de plats.

18
00:01:14,715 --> 00:01:17,650
Donc, pour ce faire, nous allons utiliser un retour

19
00:01:17,650 --> 00:01:26,535
et de méthode et avant que je ne le fasse,

20
00:01:26,535 --> 00:01:31,915
cela renvoie un observable.

21
00:01:31,915 --> 00:01:33,480
De quel genre ?

22
00:01:33,480 --> 00:01:38,690
Ceci renvoie un observable qui se compose d'un tableau de chaîne

23
00:01:38,690 --> 00:01:44,510
et retardons

24
00:01:44,510 --> 00:01:50,385
de 2 000 millisecondes ou deux secondes.

25
00:01:50,385 --> 00:01:52,415
Alors, qu'est-ce que nous voulons revenir ?

26
00:01:52,415 --> 00:01:54,895
Nous voulons prendre le tableau de vaisselle,

27
00:01:54,895 --> 00:01:58,730
extraire tous les ID du tableau de vaisselle et

28
00:01:58,730 --> 00:02:02,665
puis le donner à notre composant Dish Detail,

29
00:02:02,665 --> 00:02:06,305
parce que nous avons besoin de cela dans notre composant Dish Detail pour implémenter

30
00:02:06,305 --> 00:02:10,365
la nouvelle fonctionnalité que nous allons soutenir dans notre application.

31
00:02:10,365 --> 00:02:13,725
Maintenant, c'est une façon dont je veux l'implémenter.

32
00:02:13,725 --> 00:02:18,825
Plus tard, nous pouvons voir comment nous pouvons le faire d'une bien meilleure façon,

33
00:02:18,825 --> 00:02:21,240
dans l'un des exercices ultérieurs.

34
00:02:21,240 --> 00:02:24,680
Pour le moment, avec la façon dont le service est implémenté,

35
00:02:24,680 --> 00:02:32,455
c'est le mieux que je pourrais faire pour implémenter cette solution pour démontrer une nouvelle fonctionnalité.

36
00:02:32,455 --> 00:02:33,850
Donc, dans l'observable,

37
00:02:33,850 --> 00:02:35,050
ce que je vais faire est,

38
00:02:35,050 --> 00:02:40,070
je vais prendre le tableau de plats et le tableau de plats.

39
00:02:40,070 --> 00:02:43,770
Je vais utiliser la carte,

40
00:02:44,020 --> 00:02:49,670
un opérateur de tableau, la carte de l'opérateur de tableau JavaScript.

41
00:02:49,670 --> 00:02:51,410
Donc, l'opérateur de carte,

42
00:02:51,410 --> 00:02:58,700
comment cela fonctionne est qu'il prend chaque élément du tableau de vaisselle et nous pouvons mapper

43
00:02:58,700 --> 00:03:01,760
cet élément dans un autre élément, puis construire

44
00:03:01,760 --> 00:03:06,195
un autre tableau, puis retourner ce tableau modifié.

45
00:03:06,195 --> 00:03:10,520
Donc, pour chaque élément dans mon tableau de plats,

46
00:03:10,520 --> 00:03:14,315
, je vais prendre cet élément et puis à la place

47
00:03:14,315 --> 00:03:20,510
extraire l'ID du plat, puis de l'ID du plat.

48
00:03:20,510 --> 00:03:25,880
Donc, je finirai par en construire un nouveau tableau,

49
00:03:25,880 --> 00:03:28,420
qui ne contient que les ID,

50
00:03:28,420 --> 00:03:33,515
donc un tableau d'ID et nous voyons déjà que les ID sont une chaîne,

51
00:03:33,515 --> 00:03:37,920
c'est ce que je vais retourner de mon ID plat ici.

52
00:03:37,920 --> 00:03:41,500
C'est tout, l'opérateur de tableau de carte.

53
00:03:41,500 --> 00:03:44,800
Si vous recherchez les opérateurs de tableau JavaScript,

54
00:03:44,800 --> 00:03:47,760
vous verrez ce que fait l'opérateur de tableau de carte.

55
00:03:47,760 --> 00:03:50,540
En effet, l'opérateur de tableau de carte est également

56
00:03:50,540 --> 00:03:53,240
intéressant du point de vue des observables,

57
00:03:53,240 --> 00:03:55,910
parce qu'un observable comme vous l'avez vu,

58
00:03:55,910 --> 00:03:58,950
peut également être considéré comme un tableau,

59
00:03:58,950 --> 00:04:00,805
un flux de valeurs,

60
00:04:00,805 --> 00:04:02,330
qui peut être considéré comme un tableau.

61
00:04:02,330 --> 00:04:05,560
Ainsi, l'opérateur de carte peut également être utilisé dans les observables.

62
00:04:05,560 --> 00:04:11,935
Mais en ce moment, je l'utilise simplement comme un opérateur de tableau JavaScript.

63
00:04:11,935 --> 00:04:13,660
Sauvegardons les modifications.

64
00:04:13,660 --> 00:04:20,815
Maintenant, nous allons aller au composant Dish detail, puis mettre à jour le composant Dish detail.

65
00:04:20,815 --> 00:04:23,129
Maintenant, dans le composant Dish detail,

66
00:04:23,129 --> 00:04:24,790
avec le Dish,

67
00:04:24,790 --> 00:04:29,940
je vais déclarer une variable appelée Dishids,

68
00:04:29,940 --> 00:04:32,755
qui est un tableau de chaîne.

69
00:04:32,755 --> 00:04:36,470
Ce Dishids va stocker tous les ID de

70
00:04:36,470 --> 00:04:42,225
tous les plats qui sont dans ma collection de plats dans mon menu.

71
00:04:42,225 --> 00:04:45,410
Ensuite, j'aurai aussi

72
00:04:45,640 --> 00:04:53,490
deux autres variables appelées précédent et suivant de la chaîne de type.

73
00:04:53,490 --> 00:04:55,215
Maintenant, pourquoi ai-je besoin de ça ?

74
00:04:55,215 --> 00:04:56,980
Cela deviendra un peu plus clair,

75
00:04:56,980 --> 00:04:58,790
une fois que vous implémentez la vue,

76
00:04:58,790 --> 00:05:00,560
où je vais utiliser cela.

77
00:05:00,560 --> 00:05:04,480
Maintenant, ce que je vais faire ici est que,

78
00:05:04,480 --> 00:05:10,610
à l'intérieur de mon NGInit plus tôt,

79
00:05:10,610 --> 00:05:18,800
nous avons laissé id est égal à plus cet ID de params route.snapshot.

80
00:05:18,800 --> 00:05:22,565
Quand j'ai fait cela dans l'exercice précédent,

81
00:05:22,565 --> 00:05:28,580
Je ne vous ai pas expliqué ce que faisait l'instantané et pourquoi nous le faisons de cette façon ?

82
00:05:28,580 --> 00:05:31,490
Parce que vous deviez comprendre les observables,

83
00:05:31,490 --> 00:05:34,060
avant de comprendre ce que signifie l'instantané.

84
00:05:34,060 --> 00:05:43,940
Maintenant, dans Angular, le service d'itinéraire activé fournit un ensemble d'observables.

85
00:05:43,940 --> 00:05:46,775
Un des observables est appelé un params.

86
00:05:46,775 --> 00:05:48,860
Ce que ce params nous fournit,

87
00:05:48,860 --> 00:05:56,030
est un moyen d'obtenir les valeurs des paramètres dans mon URL.

88
00:05:56,030 --> 00:06:00,170
Donc, vous avez vu que lorsque vous introduisez les paramètres de route,

89
00:06:00,170 --> 00:06:03,605
vous avez introduit l'un des paramètres de route comme ID deux-points.

90
00:06:03,605 --> 00:06:07,590
Cet ID deux-points devient disponible en tant qu'observable.

91
00:06:07,590 --> 00:06:10,330
Donc, chaque fois que cette valeur change,

92
00:06:10,330 --> 00:06:15,745
, vous pouvez observer les changements dans cette valeur, puis agir en conséquence.

93
00:06:15,745 --> 00:06:21,010
Mais, plus tôt lorsque nous avons implémenté le composant de détail de plat,

94
00:06:21,010 --> 00:06:22,825
, nous ne connaissons pas les observables.

95
00:06:22,825 --> 00:06:26,200
Donc, je ne pouvais pas expliquer ce que faisait l'instantané à ce moment-là.

96
00:06:26,200 --> 00:06:30,460
Maintenant, laissez-moi revenir en arrière et expliquer exactement ce que fait l'instantané.

97
00:06:30,460 --> 00:06:32,870
Lorsque nous utilisons ceci comme instantané ici,

98
00:06:32,870 --> 00:06:34,250
ce que nous faisons est,

99
00:06:34,250 --> 00:06:37,580
nous prenons un instantané de

100
00:06:37,580 --> 00:06:40,250
le service de route et ensuite nous obtenons

101
00:06:40,250 --> 00:06:43,605
le paramètre observable à ce moment particulier.

102
00:06:43,605 --> 00:06:46,310
La valeur des paramètres à ce point particulier du temps

103
00:06:46,310 --> 00:06:49,340
, puis en faisant usage dans notre application.

104
00:06:49,340 --> 00:06:51,730
Bien que ce n'est pas la façon idéale de le faire.

105
00:06:51,730 --> 00:06:55,010
Au lieu de cela, nous allons donc utiliser l'observable

106
00:06:55,010 --> 00:06:59,990
directement et ensuite répondre chaque fois que cet observable change.

107
00:06:59,990 --> 00:07:04,650
Alors, comment mettre à jour ce code pour utiliser directement l'observable ?

108
00:07:04,650 --> 00:07:08,030
Donc, ce que nous réalisons est que depuis le service de route activé,

109
00:07:08,030 --> 00:07:10,390
nous avons les paramètres observables à notre disposition.

110
00:07:10,390 --> 00:07:13,070
Donc, nous allons utiliser les params observables et

111
00:07:13,070 --> 00:07:16,755
chaque fois qu'il y a un changement dans l'endroit où params observables,

112
00:07:16,755 --> 00:07:22,750
nous pouvons initier un changement dans notre composant DishDetail.

113
00:07:22,750 --> 00:07:25,820
Permettez-moi de vous illustrer comment nous allons utiliser

114
00:07:25,820 --> 00:07:28,935
les paramètres observables en mettant à jour ce code.

115
00:07:28,935 --> 00:07:30,735
Donc, en allant à ce code,

116
00:07:30,735 --> 00:07:32,630
ce que je vais faire maintenant,

117
00:07:32,630 --> 00:07:37,615
c'est que je vais changer cela en disant,

118
00:07:37,615 --> 00:07:42,950
« J'ai cette route et à partir de cette route,

119
00:07:42,950 --> 00:07:45,640
j'ai déjà les paramètres disponibles. »

120
00:07:45,640 --> 00:07:50,030
Donc, je vais supprimer l'instantané et j'utilise les paramètres.

121
00:07:50,030 --> 00:07:52,060
Donc, avec ce params,

122
00:07:52,060 --> 00:08:00,410
ce que j'ai maintenant est l'accès aux params observables.

123
00:08:00,410 --> 00:08:03,235
Maintenant, puisque nous avons ce params observable,

124
00:08:03,235 --> 00:08:09,545
Je vais utiliser un opérateur sur ce params observable et ensuite le modifier.

125
00:08:09,545 --> 00:08:17,275
Donc, l'opérateur que je vais utiliser est appelé opérateur SwitchMap.

126
00:08:17,275 --> 00:08:21,050
L'opérateur SwitchMap me permet de

127
00:08:21,050 --> 00:08:26,230
faire usage des paramètres observables et vous voyez la ligne rouge squiggly qui signifie,

128
00:08:26,230 --> 00:08:31,590
que j'ai besoin d'importer le SwitchMap observable ici.

129
00:08:31,590 --> 00:08:34,320
Donc, je vais entrer dans

130
00:08:34,320 --> 00:08:39,660
mes entrées ici et

131
00:08:39,660 --> 00:08:45,880
puis je vais entrer rxjs et opérateur.

132
00:08:49,640 --> 00:08:52,710
Donc, à partir des params observables,

133
00:08:52,710 --> 00:08:57,740
je reçois des params qui sont du type Params.

134
00:08:57,740 --> 00:09:05,700
Alors, rappelez-vous que nous avons importé les paramètres de la bibliothèque de routeur ici.

135
00:09:05,700 --> 00:09:07,520
Donc, nous avons imploré de params ici,

136
00:09:07,520 --> 00:09:12,289
de la bibliothèque du routeur et aussi nous avons importé le service de route d'activation ici,

137
00:09:12,289 --> 00:09:15,800
et ensuite nous les avons rendus disponibles dans notre constructeur ici,

138
00:09:15,800 --> 00:09:18,225
via la route de l'activateur.

139
00:09:18,225 --> 00:09:25,055
Donc, c'est pourquoi nous sommes capables de faire ce params d'itinéraire pour obtenir les params observables.

140
00:09:25,055 --> 00:09:27,740
Je vais utiliser l'opérateur SwitchMap sur les params

141
00:09:27,740 --> 00:09:34,049
observables et puis quand j'obtiens les params observables,

142
00:09:34,049 --> 00:09:44,880
ce que je vais faire est de prendre cela et ensuite dire, ce DishService.

143
00:09:45,030 --> 00:09:54,370
getDish, puis cet ID doit maintenant être obtenu en utilisant les paramètres.

144
00:09:54,370 --> 00:09:58,600
Vous voyez le paramètre que nous avons là.

145
00:09:58,600 --> 00:10:04,765
A partir des paramètres, je dirai entre parenthèses ID.

146
00:10:04,765 --> 00:10:11,490
Donc, ce qui se passe est que chaque fois que les paramètres observables changent de valeur,

147
00:10:11,490 --> 00:10:17,680
ce qui signifie que le paramètre de route change de valeur, puis immédiatement,

148
00:10:17,680 --> 00:10:20,900
l'opérateur de carte de commutateur prendra la valeur params,

149
00:10:20,900 --> 00:10:25,320
et ensuite faire un GetDish à partir de mon DishService.

150
00:10:25,320 --> 00:10:27,060
Donc, cela serait automatiquement initié,

151
00:10:27,060 --> 00:10:31,280
et cela sera disponible comme l'autre

152
00:10:31,280 --> 00:10:36,900
observable qui est émis en faisant cet opérateur de carte de commutateur sur cet observable.

153
00:10:36,900 --> 00:10:41,580
Donc, nous créons un nouvel observable qui est le GetDish,

154
00:10:41,580 --> 00:10:45,820
qui va retourner l'objet plat ici.

155
00:10:45,820 --> 00:10:49,285
Maintenant, une fois que nous obtenons le GetDish là-bas,

156
00:10:49,285 --> 00:10:53,350
alors cela peut maintenant être disponible en tant qu'observable.

157
00:10:53,350 --> 00:10:57,700
Je m'abonne simplement à ce observable en utilisant le subscribe ici.

158
00:10:57,700 --> 00:10:59,815
Puis, là j'obtiens le plat.

159
00:10:59,815 --> 00:11:03,930
Ce plat est obtenu en faisant ce GetDish ici.

160
00:11:03,930 --> 00:11:08,790
Ce plat, alors je peux l'utiliser pour le mapper dans

161
00:11:08,790 --> 00:11:14,025
ma variable de plat que j'ai déclarée plus tôt.

162
00:11:14,025 --> 00:11:17,790
Donc, de cette façon, mon plat est maintenant mis à jour.

163
00:11:17,790 --> 00:11:20,775
Donc, chaque fois que les paramètres observables changent,

164
00:11:20,775 --> 00:11:24,210
mon plat sera mis à jour pour le nouveau plat.

165
00:11:24,210 --> 00:11:27,590
Donc, remarquez comment je prends un observable, les params observables,

166
00:11:27,590 --> 00:11:33,050
et puis je mappe les params observables dans un autre observable qui est fondamentalement

167
00:11:33,050 --> 00:11:40,675
aller chercher la valeur du plat de mon DishService,

168
00:11:40,675 --> 00:11:42,955
et ensuite le rendre disponible comme observable.

169
00:11:42,955 --> 00:11:48,010
Ensuite, je m'abonne à cela observable ici, et ensuite,

170
00:11:48,010 --> 00:11:49,780
J'obtiens la valeur du plat ici,

171
00:11:49,780 --> 00:11:52,720
et puis je cartographie la valeur du plat ou plutôt

172
00:11:52,720 --> 00:11:56,795
rendant la variable du plat égale à la valeur du plat ici.

173
00:11:56,795 --> 00:12:00,415
Remarquez comment en utilisant les observables,

174
00:12:00,415 --> 00:12:04,865
vous êtes maintenant capable de prendre un observable puis de le mapper dans un autre observable.

175
00:12:04,865 --> 00:12:06,730
Pourquoi est-ce intéressant ?

176
00:12:06,730 --> 00:12:12,680
Si maintenant, j'ai un moyen de modifier ce paramètre de route,

177
00:12:12,680 --> 00:12:19,005
alors je pourrai basculer entre différents plats et voir les différents plats.

178
00:12:19,005 --> 00:12:22,100
Malheureusement, je n'ai pas cela en place.

179
00:12:22,100 --> 00:12:25,735
Donc, j'ai besoin de modifier les composants du plat pour me permettre de le faire.

180
00:12:25,735 --> 00:12:31,545
Maintenant, c'est là que je vais inclure quelques boutons dans ma vue qui quand je clique,

181
00:12:31,545 --> 00:12:36,390
je pourrai naviguer dans ma liste de plats.

182
00:12:36,390 --> 00:12:38,960
Maintenant, pour pouvoir naviguer dans ma liste de plats,

183
00:12:38,960 --> 00:12:42,005
J'ai besoin de connaître l'ensemble de mes plats,

184
00:12:42,005 --> 00:12:45,525
ou au moins j'ai besoin de connaître les identifiants de tous mes plats.

185
00:12:45,525 --> 00:12:51,410
C'est la raison pour laquelle j'utilise ce Dishids ici, ok ?

186
00:12:51,410 --> 00:12:58,800
Donc, maintenant vous voyez pourquoi j'ai inclus la méthode Dishids dans mon DishService.

187
00:12:58,800 --> 00:13:01,455
Alors, alors je commence.

188
00:13:01,455 --> 00:13:05,830
Je vais d'abord obtenir

189
00:13:05,830 --> 00:13:10,510
les Dishids en appelant la méthode DishService,

190
00:13:10,510 --> 00:13:22,570
getDishids à ce stade.

191
00:13:22,570 --> 00:13:25,735
Je travaille toujours avec l'ancienne façon de faire les choses.

192
00:13:25,735 --> 00:13:34,795
Je dois réaliser que ce getDishids envoie en observable.

193
00:13:34,795 --> 00:13:39,365
Donc, je dois m'abonner à ce observable.

194
00:13:39,365 --> 00:13:43,910
Vous voyez comment vous devez changer votre façon de penser lorsque

195
00:13:43,910 --> 00:13:48,340
vous utilisez les variables ici.

196
00:13:48,340 --> 00:13:52,840
Donc, nous dirions Dishids s'abonner,

197
00:13:52,840 --> 00:13:54,935
et à l'intérieur du subscribe,

198
00:13:54,935 --> 00:14:00,990
nous obtiendrons le paramètre qui est un tableau de chaînes,

199
00:14:00,990 --> 00:14:04,170
et ensuite je dirais là,

200
00:14:04,170 --> 00:14:09,970
Dishids sera égal à Dishids.

201
00:14:09,970 --> 00:14:14,085
Voir, comme il est facile de

202
00:14:14,085 --> 00:14:18,510
changer votre façon de penser quand vous voulez traiter avec un observable.

203
00:14:18,510 --> 00:14:20,895
Donc, le GetDishids envoie un observable,

204
00:14:20,895 --> 00:14:26,790
et je m'abonne à cet observable et puis j'ai les Dishids ici disponibles.

205
00:14:26,790 --> 00:14:29,130
Puis, également en vous abonnant au paramètre.

206
00:14:29,130 --> 00:14:31,500
Si je peux changer mon paramètre,

207
00:14:31,500 --> 00:14:35,340
valeur de paramètre route valeur dans mon code,

208
00:14:35,340 --> 00:14:38,300
alors je serai capable de naviguer parmi les plats.

209
00:14:38,300 --> 00:14:41,240
Alors, mettons en œuvre cette partie.

210
00:14:41,240 --> 00:14:43,810
Cela devient intéressant.

211
00:14:43,810 --> 00:14:47,515
Donc, pour me permettre de faire cela,

212
00:14:47,515 --> 00:14:53,190
donc je vais introduire une autre méthode ici appelée setPrevNext,

213
00:14:55,770 --> 00:15:03,480
et à cela, j'enverrai un paramètre DisHid.

214
00:15:03,480 --> 00:15:06,295
Maintenant, compte tenu de mon Dishid actuel,

215
00:15:06,295 --> 00:15:11,355
, je voulais pouvoir trouver le Dishid précédent et le suivant afin que je puisse implémenter

216
00:15:11,355 --> 00:15:17,545
ma navigation entre les plats dans mon composant dishdetail.

217
00:15:17,545 --> 00:15:22,635
Donc, c'est la raison pour laquelle j'ai déclaré le prév et le suivant.

218
00:15:22,635 --> 00:15:25,555
Maintenant, je dois pouvoir initialiser ces deux valeurs.

219
00:15:25,555 --> 00:15:28,650
Tout ce que je sais maintenant, c'est mon Dishid actuel.

220
00:15:28,650 --> 00:15:30,610
Donc, en utilisant le DisHid actuel,

221
00:15:30,610 --> 00:15:34,265
je veux être en mesure de trouver le Dishid précédent et le suivant.

222
00:15:34,265 --> 00:15:36,080
Donc, dans cette méthode,

223
00:15:36,080 --> 00:15:40,255
, je vais faire le précédent et le suivant Dishid.

224
00:15:40,255 --> 00:15:42,160
Donc, ici je vais dire,

225
00:15:42,160 --> 00:15:50,200
laisser l'index égal à ce Dishids.

226
00:15:50,200 --> 00:15:52,900
Maintenant, je ne connais que l'ID de mon plat,

227
00:15:52,900 --> 00:15:55,360
mais l'ID de mon plat ne me donne pas tout.

228
00:15:55,360 --> 00:16:00,980
J'ai besoin de pouvoir trouver le plat dans ce tableau d'ID,

229
00:16:00,980 --> 00:16:06,510
donc c'est pourquoi je dis ce dishids, et indexOf.

230
00:16:06,510 --> 00:16:13,640
Vous devez connaître l'opérateur IndexOf sur un tableau JavaScript.

231
00:16:13,640 --> 00:16:20,935
L'opérateur IndexOf prend une valeur, puis trouve l'index de cette valeur dans le tableau.

232
00:16:20,935 --> 00:16:27,605
Donc, IndexOf et le paramètre ici,

233
00:16:27,605 --> 00:16:29,945
Je vais donner est le DisHid,

234
00:16:29,945 --> 00:16:34,765
le DisHid que je vais obtenir dans un court laps de temps.

235
00:16:34,765 --> 00:16:38,765
Maintenant, une fois que j'ai obtenu l'indice de cette valeur actuelle,

236
00:16:38,765 --> 00:16:42,385
je peux alors mapper

237
00:16:42,385 --> 00:16:49,420
les deux Dishids précédents.

238
00:16:49,420 --> 00:16:59,080
Donc, c'est là que je

239
00:16:59,080 --> 00:17:08,980
va faire un peu de code délicat ici qui me permettra de m'envelopper quand je le suis.

240
00:17:08,980 --> 00:17:15,030
Donc, notez que ce tableau Dishids contient un certain nombre de valeurs là-bas.

241
00:17:15,030 --> 00:17:20,270
Si ma valeur actuelle de mon disHid est le premier élément,

242
00:17:20,270 --> 00:17:24,565
alors la valeur précédente sera l'élément indexé à zéro dans mon tableau.

243
00:17:24,565 --> 00:17:26,590
Mais si ma valeur actuelle est l'élément zéro,

244
00:17:26,590 --> 00:17:28,235
le tout premier élément de mon tableau,

245
00:17:28,235 --> 00:17:32,530
alors je veux envelopper pour obtenir le dernier élément de mon tableau.

246
00:17:32,530 --> 00:17:36,770
Donc, c'est là que je fais usage de l'opérateur modulo avec

247
00:17:36,770 --> 00:17:42,235
une façon mathématique d'enrouler les choses autour.

248
00:17:42,235 --> 00:17:44,275
Donc, je dirais ce Dishid

249
00:17:44,275 --> 00:18:14,500
plus index moins un, et modulo la longueur de ce DishIds.

250
00:18:14,500 --> 00:18:15,925
Donc, ce que je fais est,

251
00:18:15,925 --> 00:18:19,590
la valeur précédente sera l'indice courant,

252
00:18:19,590 --> 00:18:21,735
indice de la valeur actuelle,

253
00:18:21,735 --> 00:18:25,935
plus la longueur des plats moins un.

254
00:18:25,935 --> 00:18:27,815
Maintenant, si l'index est un,

255
00:18:27,815 --> 00:18:29,585
index moins un me donnera zéro.

256
00:18:29,585 --> 00:18:30,680
Si l'index est zéro,

257
00:18:30,680 --> 00:18:32,670
index moins un me donnera moins un,

258
00:18:32,670 --> 00:18:34,210
mais ce n'est pas ce que je veux.

259
00:18:34,210 --> 00:18:38,190
Je veux envelopper et obtenir la longueur Dishid moins un.

260
00:18:38,190 --> 00:18:41,870
Donc, c'est pourquoi j'y insère ceci,

261
00:18:41,870 --> 00:18:44,995
, puis je fais un modulo avec les Dishids.

262
00:18:44,995 --> 00:18:47,660
Donc, quand l'index est zéro,

263
00:18:47,660 --> 00:18:51,915
je vais m'enrouler pour obtenir le dernier élément de mon tableau.

264
00:18:51,915 --> 00:18:56,965
Donc, c'est ainsi que j'initialise la valeur précédente.

265
00:18:56,965 --> 00:18:59,120
Ensuite, la valeur suivante,

266
00:18:59,120 --> 00:19:02,700
Je vais utiliser la même approche,

267
00:19:02,770 --> 00:19:08,205
mais envelopper en disant index plus un.

268
00:19:08,205 --> 00:19:11,780
Donc, si je suis actuellement au dernier élément du tableau,

269
00:19:11,780 --> 00:19:14,200
alors je veux envelopper à zéro.

270
00:19:14,200 --> 00:19:16,715
Donc, c'est l'autre partie de ce que je fais.

271
00:19:16,715 --> 00:19:19,200
Donc, là, je mets le précédent et le suivant.

272
00:19:19,200 --> 00:19:21,795
Alors, quand dois-je définir le précédent et le suivant ?

273
00:19:21,795 --> 00:19:23,965
Chaque fois que mon plat change,

274
00:19:23,965 --> 00:19:27,630
Je dois pouvoir lancer un appel.

275
00:19:27,630 --> 00:19:30,590
Maintenant, où est-ce que je change ma valeur de plat ?

276
00:19:30,590 --> 00:19:34,365
En regardant en arrière l'abonnement ici,

277
00:19:34,365 --> 00:19:35,905
remarquez que juste là,

278
00:19:35,905 --> 00:19:40,180
vous changez votre plat chaque fois que notre paramètre change.

279
00:19:40,180 --> 00:19:42,035
Donc, à ce moment-là,

280
00:19:42,035 --> 00:19:45,495
, je veux réinitialiser ma valeur précédente et suivante.

281
00:19:45,495 --> 00:19:51,940
Donc, je vais changer ceci en un bloc de code ici.

282
00:19:51,940 --> 00:19:57,250
Ensuite, je dirais que setPrevNext,

283
00:19:57,250 --> 00:20:02,170
et ensuite le paramètre serait disHid.

284
00:20:04,370 --> 00:20:07,970
C'est ça. Donc, avec ce changement,

285
00:20:07,970 --> 00:20:11,155
ce qui se passe est chaque fois que mon plat est mis à jour,

286
00:20:11,155 --> 00:20:17,085
Je vais mettre à jour le précédent et le suivant aussi en conséquence d'ici.

287
00:20:17,085 --> 00:20:19,605
Donc, avec ce petit changement,

288
00:20:19,605 --> 00:20:23,150
mon Dishid sera le plat actuel.

289
00:20:23,150 --> 00:20:25,530
Le précédent pointera vers le plat précédent,

290
00:20:25,530 --> 00:20:28,690
et le suivant sera pointé vers le prochain Dishid.

291
00:20:28,690 --> 00:20:31,565
Donc, j'ai tous les trois dont j'ai besoin.

292
00:20:31,565 --> 00:20:37,460
Maintenant, je peux utiliser ces trois valeurs afin d'implémenter la façon de naviguer

293
00:20:37,460 --> 00:20:43,325
parmi les plats de mon modèle en incluant quelques boutons dans mon modèle.

294
00:20:43,325 --> 00:20:48,775
Alors, passons au modèle de composants dishdetail,

295
00:20:48,775 --> 00:20:53,569
, puis incluons quelques boutons qui me permettent de naviguer parmi les plats.

296
00:20:53,569 --> 00:20:58,535
Aller au composant Dish Detail pendant que je suis ici,

297
00:20:58,535 --> 00:21:06,150
laissez-moi prendre ce NGiF de cette carte et ensuite le déplacer dans la div là-haut.

298
00:21:06,150 --> 00:21:08,445
Je veux cacher toute la div,

299
00:21:08,445 --> 00:21:10,850
quand mon plat n'est actuellement pas défectueux,

300
00:21:10,850 --> 00:21:13,515
de même pour les commentaires aussi.

301
00:21:13,515 --> 00:21:16,440
Je trouve cela un peu bizarre

302
00:21:16,440 --> 00:21:19,700
lorsque mes informations de plat sont récupérées sur le serveur.

303
00:21:19,700 --> 00:21:24,945
Donc, je vais faire ce changement pour les deux divs que

304
00:21:24,945 --> 00:21:32,810
l'un montrant les commentaires et l'autre montrant les détails du plat dans la carte.

305
00:21:32,810 --> 00:21:35,170
Avec ces deux mises à jour,

306
00:21:35,170 --> 00:21:37,210
dans mes actions de carte,

307
00:21:37,210 --> 00:21:38,605
Je vais inclure

308
00:21:38,605 --> 00:21:49,165
un bouton de plus de type bouton évidemment et ce bouton,

309
00:21:49,165 --> 00:21:55,165
Je vais inclure le RouterLink.

310
00:21:55,165 --> 00:21:57,320
Dès que vous voyez le lien du routeur,

311
00:21:57,320 --> 00:21:58,775
vous dites immédiatement, « Oh,

312
00:21:58,775 --> 00:22:00,620
Je sais ce que vous essayez de faire.

313
00:22:00,620 --> 00:22:04,890
Vous essayez de convertir ce bouton pour pouvoir naviguer parmi

314
00:22:04,890 --> 00:22:11,720
les différents composants de mon service. »

315
00:22:11,720 --> 00:22:14,000
Donc, pour le RouterLink,

316
00:22:14,000 --> 00:22:22,870
je vais fournir un tableau de valeurs et le tableau de valeurs pour le RouterLink,

317
00:22:22,870 --> 00:22:27,135
Je vais faire dishdetail.

318
00:22:27,135 --> 00:22:30,665
Aussi, la deuxième partie.

319
00:22:30,665 --> 00:22:33,330
Voir, c'est la partie intéressante.

320
00:22:33,330 --> 00:22:37,125
La deuxième partie de ce tableau sera prev,

321
00:22:37,125 --> 00:22:43,090
qui est la variable que j'ai déclarée dans mon composant.

322
00:22:43,090 --> 00:22:52,905
Donc, avec cela, ce bouton deviendra un lien vers le plat précédent dans ma liste de plats.

323
00:22:52,905 --> 00:22:55,615
Spiffy, hein ?

324
00:22:55,615 --> 00:23:01,010
Alors, avec ça, quoi d'autre ?

325
00:23:02,010 --> 00:23:07,550
Laissez-moi fermer le bouton ici et puis à l'intérieur du bouton,

326
00:23:07,550 --> 00:23:16,890
Je vais utiliser une icône Font Impressionnant

327
00:23:22,360 --> 00:23:26,550
fa chevron-gauche.

328
00:23:32,670 --> 00:23:37,935
Alors, c'est tout. Ce bouton sera un bouton avec une icône là.

329
00:23:37,935 --> 00:23:40,605
Donc, maintenant nous avons un bouton ici,

330
00:23:40,605 --> 00:23:43,465
Je vais aussi inclure un autre bouton ici.

331
00:23:43,465 --> 00:23:44,880
Avant d'inclure le bouton,

332
00:23:44,880 --> 00:23:50,330
Je vais faire span class flex-spacer,

333
00:23:50,330 --> 00:23:55,210
vous m'avez vu utiliser le flex-spacer dans l'un des exercices précédents.

334
00:23:55,210 --> 00:23:56,855
Alors, vous voyez ce que je fais,

335
00:23:56,855 --> 00:24:00,695
Je m'étire pour inclure le deuxième bouton.

336
00:24:00,695 --> 00:24:02,270
Donc, pour le deuxième bouton,

337
00:24:02,270 --> 00:24:05,040
Je vais juste copier ce

338
00:24:06,780 --> 00:24:13,190
et ensuite le coller là et mettre à jour celui-ci pour dire prev.

339
00:24:13,190 --> 00:24:16,730
Au lieu de précédent, j'irai ensuite

340
00:24:16,730 --> 00:24:23,335
fa-chevron-gauche à fa-chevron-droite, et c'est tout.

341
00:24:23,335 --> 00:24:28,049
Sauvegardons les modifications apportées à nos composants Dish Detail,

342
00:24:28,049 --> 00:24:30,760
et aussi les fichiers restants.

343
00:24:30,760 --> 00:24:35,340
Après cette mise à jour, allons voir ce que fait notre application.

344
00:24:35,340 --> 00:24:38,065
Aller à mon application dans le navigateur,

345
00:24:38,065 --> 00:24:40,500
allons au composant Menu.

346
00:24:40,500 --> 00:24:46,240
Nous voyons le Menu et sélectionnons un élément du Menu ici.

347
00:24:46,240 --> 00:24:53,270
Donc, notez que maintenant cet élément du plat de menu est affiché ici.

348
00:24:53,270 --> 00:24:55,225
Avis en bas,

349
00:24:55,225 --> 00:24:58,835
nous avons deux boutons ici, à gauche et à droite.

350
00:24:58,835 --> 00:25:01,440
Lorsque nous cliquons sur le bouton gauche,

351
00:25:01,440 --> 00:25:08,875
notez comment nous sommes en mesure de passer au plat précédent dans la liste des plats.

352
00:25:08,875 --> 00:25:15,515
Je peux continuer à faire à gauche et continuer à naviguer vers la gauche et la droite.

353
00:25:15,515 --> 00:25:17,980
Notez que lorsque je fais cela,

354
00:25:17,980 --> 00:25:22,655
ma vue réelle n'est pas rechargée,

355
00:25:22,655 --> 00:25:25,190
à la place je vais seulement chercher

356
00:25:25,190 --> 00:25:34,955
les données relatives à la vaisselle du service, puis mettre à jour ma vue ici.

357
00:25:34,955 --> 00:25:38,350
La raison pour laquelle nous sommes capables de le faire est parce que nous

358
00:25:38,350 --> 00:25:43,445
avons l'observable, les params observables.

359
00:25:43,445 --> 00:25:45,890
Donc, chaque fois que je clique sur ces deux-là,

360
00:25:45,890 --> 00:25:48,860
gauche et droite, les params observables,

361
00:25:48,860 --> 00:25:56,620
remarque comment en ce moment l'adresse montre plat zéro.

362
00:25:56,620 --> 00:25:58,315
Si je clique sur la droite,

363
00:25:58,315 --> 00:26:02,925
alors cela sera mis à jour de dishdetail zero à dishdetail one.

364
00:26:02,925 --> 00:26:07,560
Ce changement de paramètre, et cela entraînera mon observable à

365
00:26:07,560 --> 00:26:12,245
aller chercher le nouveau plat du service de vaisselle.

366
00:26:12,245 --> 00:26:14,980
Ensuite, le nouveau plat est récupéré,

367
00:26:14,980 --> 00:26:20,285
la variable de plat dans mon composant est mise à jour,

368
00:26:20,285 --> 00:26:21,885
et quand cela est mis à jour,

369
00:26:21,885 --> 00:26:23,640
ma vue est également mise à jour.

370
00:26:23,640 --> 00:26:28,185
Donc, notez que j'utilise la même vue,

371
00:26:28,185 --> 00:26:36,440
Je suis capable de naviguer parmi les différents plats qui font partie de ma liste de plats.

372
00:26:36,440 --> 00:26:42,470
C'est la partie intéressante que vous pouvez obtenir en utilisant les params

373
00:26:42,470 --> 00:26:49,250
observables à partir de l'activator.service dans votre application Angular.

374
00:26:49,250 --> 00:26:56,355
Une façon intéressante de faire usage des factures observables notre application Angular.

375
00:26:56,355 --> 00:26:59,640
Bien sûr, la façon dont je l'ai implémenté,

376
00:26:59,640 --> 00:27:03,210
Je l'ai fait un peu d'une façon inventée de faire les choses.

377
00:27:03,210 --> 00:27:07,965
J'ai dû me procurer la liste des cartes d'identité.

378
00:27:07,965 --> 00:27:12,760
J'ai dû modifier le précédent et le suivant et ainsi de suite.

379
00:27:12,760 --> 00:27:16,360
Si vous aviez un moyen d'obtenir automatiquement le

380
00:27:16,360 --> 00:27:20,000
précédent et la valeur suivante de votre service,

381
00:27:20,000 --> 00:27:22,015
chaque fois que vous récupérez un plat,

382
00:27:22,015 --> 00:27:26,895
alors la mise en œuvre du score deviendra un peu plus facile.

383
00:27:26,895 --> 00:27:28,705
En ce moment, nous n'avons pas ça.

384
00:27:28,705 --> 00:27:33,430
Donc, j'ai travaillé autour du problème parce que je voulais juste illustrer la façon dont

385
00:27:33,430 --> 00:27:38,855
utilise un observable comme celui-ci dans votre application Angular.

386
00:27:38,855 --> 00:27:43,270
Si nous pouvons implémenter le service qui retournera la valeur

387
00:27:43,270 --> 00:27:47,320
précédente et la valeur suivante chaque fois que nous allons chercher un plat,

388
00:27:47,320 --> 00:27:53,640
alors tout ce mal de tête sera beaucoup plus simplement résolu.

389
00:27:53,640 --> 00:27:58,810
Reporte cette idée à un stade ultérieur.

390
00:27:58,810 --> 00:28:01,930
Mais pour le moment, vous voyez comment nous faisons en sorte que

391
00:28:01,930 --> 00:28:05,250
utilise les paramètres observables afin d'implémenter

392
00:28:05,250 --> 00:28:12,605
une façon intéressante de supporter une nouvelle fonctionnalité dans notre application Angular.

393
00:28:12,605 --> 00:28:16,325
Ceci termine cet exercice.

394
00:28:16,325 --> 00:28:24,000
C'est le bon moment pour vous de faire un commit git avec le message RXJS Part 2.