1
00:00:03,680 --> 00:00:10,440
Nun, da du deine Füße nass mit Angular-Observables in der vorherigen Übung gemacht

2
00:00:10,440 --> 00:00:11,860
hast, blickst du zurück und sagst:

3
00:00:11,860 --> 00:00:14,320
„Oh Observables sind ja nicht so schlecht,

4
00:00:14,320 --> 00:00:17,070
sie sind ziemlich einfach, um Gebrauch zu machen.“

5
00:00:17,070 --> 00:00:19,125
Also werden wir ein bisschen ehrgeiziger.

6
00:00:19,125 --> 00:00:25,080
Gehen wir einen Schritt weiter und nutzen dann ein integriertes beobachtbares in Angular.

7
00:00:25,080 --> 00:00:27,960
Die beobachtbaren Parameter,

8
00:00:27,960 --> 00:00:32,655
die vom aktivierten Routendienst innerhalb unseres Router-Moduls kommen.

9
00:00:32,655 --> 00:00:35,940
Wir werden nun die Komponente „Detail“ aktualisieren,

10
00:00:35,940 --> 00:00:39,630
um die Parameter zu nutzen,

11
00:00:39,630 --> 00:00:42,770
die vom Aktivator Dürre Service beobachtet werden können, um

12
00:00:42,770 --> 00:00:47,975
einige neue Funktionen in unserer Angular-Anwendung zu unterstützen.

13
00:00:47,975 --> 00:00:52,400
Bevor wir fortfahren, um die Komponente des Gerichtes

14
00:00:52,400 --> 00:00:57,650
zu aktualisieren, möchte ich eine weitere Methode in meiner Datei „Dish service.ts“ einführen.

15
00:00:57,650 --> 00:01:02,735
Also öffnen Gericht service.ts Datei und dann werden wir eine neue Methode namens

16
00:01:02,735 --> 00:01:08,060
GetDishids hinzufügen und dies wird im Grunde

17
00:01:08,060 --> 00:01:14,715
alle Gerichte IDs zurückgeben ist für alle Gerichte in unserer Sammlung von Gerichten.

18
00:01:14,715 --> 00:01:17,650
Also, um das zu tun, verwenden wir eine Rückkehr

19
00:01:17,650 --> 00:01:26,535
und eine Methode und bevor ich das tue,

20
00:01:26,535 --> 00:01:31,915
gibt dies eine beobachtbare zurück.

21
00:01:31,915 --> 00:01:33,480
Was für eine Art?

22
00:01:33,480 --> 00:01:38,690
Dies gibt eine beobachtbare zurück, die aus einem Array von

23
00:01:38,690 --> 00:01:44,510
String besteht und lassen Sie uns

24
00:01:44,510 --> 00:01:50,385
es um 2.000 Millisekunden oder zwei Sekunden verzögern.

25
00:01:50,385 --> 00:01:52,415
Also, was wollen wir zurückkehren?

26
00:01:52,415 --> 00:01:54,895
Wir wollen das Geschirr Array nehmen,

27
00:01:54,895 --> 00:01:58,730
alle IDs aus dem Geschirr Array extrahieren und

28
00:01:58,730 --> 00:02:02,665
es dann unserer Dish Detail Komponente geben,

29
00:02:02,665 --> 00:02:06,305
weil wir das innerhalb unserer Dish Detail Komponente benötigen, um

30
00:02:06,305 --> 00:02:10,365
die neue Funktion zu implementieren, die wir in unserer Anwendung unterstützen werden.

31
00:02:10,365 --> 00:02:13,725
Nun, das ist eine Möglichkeit, dass ich es implementieren möchte.

32
00:02:13,725 --> 00:02:18,825
Später können wir sehen, wie wir es

33
00:02:18,825 --> 00:02:21,240
in einer der späteren Übungen besser machen können.

34
00:02:21,240 --> 00:02:24,680
Im Moment, mit der Art und Weise, wie der Service implementiert wird,

35
00:02:24,680 --> 00:02:32,455
ist dies das Beste, was ich tun könnte, um diese Lösung zu implementieren, um eine neue Funktion zu demonstrieren.

36
00:02:32,455 --> 00:02:33,850
Also, innerhalb des Beobachtbaren,

37
00:02:33,850 --> 00:02:35,050
was ich tun werde, ist,

38
00:02:35,050 --> 00:02:40,070
dass ich das Geschirr Array und die Gerichte Array nehmen werde.

39
00:02:40,070 --> 00:02:43,770
Ich werde die Karte,

40
00:02:44,020 --> 00:02:49,670
einen Array-Operator, die JavaScript-Array-Operatorkarte verwenden.

41
00:02:49,670 --> 00:02:51,410
Also, der Kartenoperator,

42
00:02:51,410 --> 00:02:58,700
wie es funktioniert, ist, dass es jedes Element aus dem Geschirr Array nimmt und wir können

43
00:02:58,700 --> 00:03:01,760
dieses Element in ein anderes Element zuordnen und dann ein

44
00:03:01,760 --> 00:03:06,195
anderes Array konstruieren und dann dieses modifizierte Array zurückgeben.

45
00:03:06,195 --> 00:03:10,520
Also, für jeden Artikel in meinem Geschirr Array,

46
00:03:10,520 --> 00:03:14,315
werde ich diesen Artikel nehmen und dann stattdessen

47
00:03:14,315 --> 00:03:20,510
die Gericht ID und dann aus der Gericht ID extrahieren.

48
00:03:20,510 --> 00:03:25,880
Also, ich werde am Ende ein neues Array daraus konstruieren, das

49
00:03:25,880 --> 00:03:28,420
nur die IDs enthält,

50
00:03:28,420 --> 00:03:33,515
also ein Array von IDs und wir sehen bereits, dass die IDs String sind,

51
00:03:33,515 --> 00:03:37,920
das ist, was ich hier von meiner Dish ID zurückgeben werde.

52
00:03:37,920 --> 00:03:41,500
Das war's, der Kartenarray-Operator.

53
00:03:41,500 --> 00:03:44,800
Wenn Sie JavaScript-Array-Operatoren nachschlagen,

54
00:03:44,800 --> 00:03:47,760
werden Sie sehen, was der Kartenarray-Operator tut.

55
00:03:47,760 --> 00:03:50,540
Tatsächlich ist der Kartenarray-Operator auch

56
00:03:50,540 --> 00:03:53,240
aus der Perspektive der Observables interessant,

57
00:03:53,240 --> 00:03:55,910
da ein beobachtbares, wie Sie gesehen haben,

58
00:03:55,910 --> 00:03:58,950
auch als Array betrachtet werden kann,

59
00:03:58,950 --> 00:04:00,805
ein Wertestrom

60
00:04:00,805 --> 00:04:02,330
, der als Array betrachtet werden kann.

61
00:04:02,330 --> 00:04:05,560
So kann der Kartenoperator auch in Observables verwendet werden.

62
00:04:05,560 --> 00:04:11,935
Aber in diesem Moment verwende ich es einfach als JavaScript-Array-Operator.

63
00:04:11,935 --> 00:04:13,660
Speichern wir die Änderungen.

64
00:04:13,660 --> 00:04:20,815
Nun gehen wir zur Komponente „Dish Detail“ und aktualisieren dann die Komponente „Dish Detail“.

65
00:04:20,815 --> 00:04:23,129
Nun, innerhalb der Dish Detailkomponente,

66
00:04:23,129 --> 00:04:24,790
zusammen mit dem Dish,

67
00:04:24,790 --> 00:04:29,940
werde ich eine Variable namens Dishids deklarieren,

68
00:04:29,940 --> 00:04:32,755
die ein Array von String ist.

69
00:04:32,755 --> 00:04:36,470
Diese DeShids speichert alle IDs

70
00:04:36,470 --> 00:04:42,225
aller Gerichte, die in meiner Sammlung von Gerichten in meiner Speisekarte sind.

71
00:04:42,225 --> 00:04:45,410
Dann werde ich auch

72
00:04:45,640 --> 00:04:53,490
zwei weitere Variablen haben, die vorherige und nächste der Typzeichenfolge genannt werden.

73
00:04:53,490 --> 00:04:55,215
Warum brauche ich die?

74
00:04:55,215 --> 00:04:56,980
Das wird ein bisschen klarer,

75
00:04:56,980 --> 00:04:58,790
sobald Sie die Ansicht implementieren,

76
00:04:58,790 --> 00:05:00,560
wo ich dies nutzen werde.

77
00:05:00,560 --> 00:05:10,610
Nun, was ich hier tun werde, ist, dass

78
00:05:10,610 --> 00:05:18,800
wir in meinem NGinit früher ID gleich plus dieser route.snapshot params ID gelassen haben.

79
00:05:18,800 --> 00:05:22,565
Als ich das in der vorherigen Übung gemacht

80
00:05:22,565 --> 00:05:28,580
habe, habe ich dir nicht erklärt, was der Schnappschuss gemacht hat und warum wir es so machen?

81
00:05:28,580 --> 00:05:31,490
Weil Sie Observables verstehen mussten,

82
00:05:31,490 --> 00:05:34,060
bevor Sie verstehen, was der Snapshot bedeutet.

83
00:05:34,060 --> 00:05:43,940
Jetzt stellt der aktivierte Routen-Service in Angular eine Reihe von Observables bereit.

84
00:05:43,940 --> 00:05:46,775
Eines der Observables wird als Parameter bezeichnet.

85
00:05:46,775 --> 00:05:48,860
Was uns diese Parameter bietet,

86
00:05:48,860 --> 00:05:56,030
ist eine Möglichkeit, die Parameterwerte innerhalb meiner URL zu erhalten.

87
00:05:56,030 --> 00:06:00,170
Sie haben also gesehen, dass Sie bei der Einführung der Routenparameter

88
00:06:00,170 --> 00:06:03,605
einen der Routenparameter als Doppelpunkt-ID eingeführt haben.

89
00:06:03,605 --> 00:06:07,590
Diese Doppelpunkt-ID wird als beobachtbar verfügbar.

90
00:06:07,590 --> 00:06:10,330
Wenn sich dieser Wert ändert,

91
00:06:10,330 --> 00:06:15,745
können Sie Änderungen an diesem Wert beobachten und dann entsprechend handeln.

92
00:06:15,745 --> 00:06:21,010
Aber früher, als wir die Komponente „Dish Detail“ implementiert

93
00:06:21,010 --> 00:06:22,825
haben, wussten wir nichts über Observables.

94
00:06:22,825 --> 00:06:26,200
Also konnte ich nicht erklären, was der Snapshot zu diesem Zeitpunkt tat.

95
00:06:26,200 --> 00:06:30,460
Lassen Sie mich zurückgehen und genau erklären, was die Momentaufnahme macht.

96
00:06:30,460 --> 00:06:32,870
Wenn wir dies als Snapshot hier verwenden,

97
00:06:32,870 --> 00:06:34,250
was wir tun, ist, dass

98
00:06:34,250 --> 00:06:37,580
wir einen Schnappschuss

99
00:06:37,580 --> 00:06:40,250
vom Routen-Service nehmen und dann erhalten wir

100
00:06:40,250 --> 00:06:43,605
den Parameter, der zu diesem bestimmten Zeitpunkt beobachtbar ist.

101
00:06:43,605 --> 00:06:46,310
Der Wert der Parameter zu diesem bestimmten

102
00:06:46,310 --> 00:06:49,340
Zeitpunkt und dann Gebrauch von ihm innerhalb unserer Anwendung.

103
00:06:49,340 --> 00:06:51,730
Obwohl das nicht der ideale Weg ist, dies zu tun.

104
00:06:51,730 --> 00:06:55,010
Stattdessen lassen Sie uns das beobachtbare

105
00:06:55,010 --> 00:06:59,990
direkt nutzen und dann reagieren, wenn sich das beobachtbare ändert.

106
00:06:59,990 --> 00:07:04,650
Also, wie aktualisieren wir diesen Code, um das Observable direkt zu nutzen?

107
00:07:04,650 --> 00:07:08,030
Was wir also erkennen, ist, dass

108
00:07:08,030 --> 00:07:10,390
wir vom aktivierten Routendienst die Parameter haben, die uns beobachtbar sind.

109
00:07:10,390 --> 00:07:13,070
Also, wir werden die Parameter beobachtbar machen und

110
00:07:13,070 --> 00:07:16,755
jedes Mal, wenn es eine Änderung in wo params beobachtbar ist,

111
00:07:16,755 --> 00:07:22,750
können wir eine Änderung innerhalb unserer DishDetail-Komponente initiieren.

112
00:07:22,750 --> 00:07:25,820
Lassen Sie mich Ihnen zeigen, wie wir

113
00:07:25,820 --> 00:07:28,935
die beobachtbaren Parameter nutzen werden, indem wir diesen Code aktualisieren.

114
00:07:28,935 --> 00:07:30,735
Also, zu diesem Code

115
00:07:30,735 --> 00:07:32,630
zu gehen, was ich jetzt tun werde,

116
00:07:32,630 --> 00:07:37,615
ist, dass ich dies ändern werde, um zu sagen:

117
00:07:37,615 --> 00:07:42,950
„Ich habe diese Route und von dieser Route

118
00:07:42,950 --> 00:07:45,640
habe ich die Parameter bereits verfügbar.“

119
00:07:45,640 --> 00:07:50,030
Also werde ich den Snapshot entfernen und die Parameter verwenden.

120
00:07:50,030 --> 00:07:52,060
Also, mit diesen Parametern,

121
00:07:52,060 --> 00:08:00,410
was ich jetzt habe, ist der Zugang zu den Parametern beobachtbar.

122
00:08:00,410 --> 00:08:03,235
Nun, da wir diese Parameter beobachtbar haben,

123
00:08:03,235 --> 00:08:09,545
werde ich einen Operator für diese Parameter verwenden, die beobachtbar sind und ihn dann modifizieren.

124
00:08:09,545 --> 00:08:17,275
Also, der Operator, den ich verwenden werde, heißt SwitchMap-Operator.

125
00:08:17,275 --> 00:08:21,050
Der SwitchMap-Operator ermöglicht es mir,

126
00:08:21,050 --> 00:08:26,230
die Parameter beobachtbar zu machen und Sie sehen die rote verrückte Linie,

127
00:08:26,230 --> 00:08:31,590
die bedeutet, dass ich die hier beobachtbare SwitchMap importieren muss.

128
00:08:31,590 --> 00:08:34,320
Also, ich werde

129
00:08:34,320 --> 00:08:39,660
hier zu meinen Eingaben gehen und

130
00:08:39,660 --> 00:08:45,880
dann werde ich rxjs und operator eingeben.

131
00:08:49,640 --> 00:08:52,710
Also, von den Parametern beobachtbar,

132
00:08:52,710 --> 00:08:57,740
bekomme ich params, die vom Typ Params ist.

133
00:08:57,740 --> 00:09:05,700
Also, erinnern Sie sich, dass wir die Parameter aus der Router-Bibliothek hier importiert haben.

134
00:09:05,700 --> 00:09:07,520
Also, wir flehten zu params hier,

135
00:09:07,520 --> 00:09:12,289
aus der Router-Bibliothek und auch wir importierten den Aktivierungs-Routendienst hier,

136
00:09:12,289 --> 00:09:15,800
und dann haben wir sie in unserem Konstruktor hier

137
00:09:15,800 --> 00:09:18,225
über die Aktivator-Route zur Verfügung gestellt.

138
00:09:18,225 --> 00:09:25,055
Also, deshalb sind wir in der Lage, diese Route params zu machen, um die Parameter beobachtbar zu bekommen.

139
00:09:25,055 --> 00:09:27,740
Ich werde den SwitchMap-Operator für die

140
00:09:27,740 --> 00:09:34,049
beobachtbaren Parameter verwenden und dann, wenn ich die Parameter beobachtbar

141
00:09:34,049 --> 00:09:44,880
mache, ist das zu nehmen und dann diesen DishService zu sagen.

142
00:09:45,030 --> 00:09:54,370
GetDish, und dann sollte diese ID jetzt durch die Verwendung der Parameter erhalten werden.

143
00:09:54,370 --> 00:09:58,600
Sie sehen den Parameter, den wir dort haben.

144
00:09:58,600 --> 00:10:04,765
Von den Parametern, werde ich sagen, in Klammern ID.

145
00:10:04,765 --> 00:10:11,490
Was passiert, ist, dass, wenn die beobachtbaren Parameter den Wert ändert,

146
00:10:11,490 --> 00:10:17,680
was bedeutet, dass der Routenparameter den Wert ändert, sofort

147
00:10:17,680 --> 00:10:20,900
der Switch-Map-Operator den params-Wert annimmt

148
00:10:20,900 --> 00:10:25,320
und dann einen GetDish von meinem DishService ausführt.

149
00:10:25,320 --> 00:10:27,060
Also, dies würde automatisch initiiert werden,

150
00:10:27,060 --> 00:10:31,280
und dies wird als die andere

151
00:10:31,280 --> 00:10:36,900
beobachtbare verfügbar sein, die durch diesen Schalter Kartenoperator auf diesem beobachtbaren emittiert wird.

152
00:10:36,900 --> 00:10:41,580
Also, wir erstellen ein neues Observable, das die GetDish

153
00:10:41,580 --> 00:10:45,820
ist, die das Gericht Objekt hier zurückgeben wird.

154
00:10:45,820 --> 00:10:49,285
Jetzt, wenn wir das GetDish dort haben,

155
00:10:49,285 --> 00:10:53,350
dann kann das jetzt als Beobachtbare verfügbar sein.

156
00:10:53,350 --> 00:10:57,700
Ich abonniere nur das beobachtbare mit dem hier abonnieren.

157
00:10:57,700 --> 00:10:59,815
Dann bekomme ich das Gericht.

158
00:10:59,815 --> 00:11:03,930
Dieses Gericht wird durch diese GetDish hier erhalten.

159
00:11:03,930 --> 00:11:08,790
Dieses Gericht, dann kann ich verwenden, um es in

160
00:11:08,790 --> 00:11:14,025
meine Dishvariable zu mappen, die ich zuvor deklariert habe.

161
00:11:14,025 --> 00:11:17,790
Also, auf diese Weise wird mein Gericht jetzt aktualisiert.

162
00:11:17,790 --> 00:11:20,775
Also, jedes Mal, wenn sich die Parameter beobachtbar ändert,

163
00:11:20,775 --> 00:11:24,210
wird mein Gericht auf das neue Gericht aktualisiert.

164
00:11:24,210 --> 00:11:27,590
Also, beachten Sie, wie ich ein beobachtbares nehme, die Parameter beobachtbar,

165
00:11:27,590 --> 00:11:33,050
und dann mappen ich die beobachtbaren Parameter in ein anderes beobachtbares

166
00:11:33,050 --> 00:11:40,675
ab, das im Grunde den DishService abruft

167
00:11:40,675 --> 00:11:42,955
und diesen dann als beobachtbar zur Verfügung stellt.

168
00:11:42,955 --> 00:11:48,010
Dann abonniere ich dieses Observable hier, und dann

169
00:11:48,010 --> 00:11:49,780
bekomme ich hier den Dish-Wert,

170
00:11:49,780 --> 00:11:52,720
und dann mappe ich den Dish-Wert oder

171
00:11:52,720 --> 00:11:56,795
mache die Dish-Variable gleich dem Dish-Wert hier.

172
00:11:56,795 --> 00:12:00,415
Beachten Sie, dass

173
00:12:00,415 --> 00:12:04,865
Sie mit den Observables jetzt in der Lage sind, ein Beobachtbares zu nehmen und es dann einem anderen beobachtbaren zuzuordnen.

174
00:12:04,865 --> 00:12:06,730
Warum ist das interessant?

175
00:12:06,730 --> 00:12:12,680
Wenn ich jetzt eine Möglichkeit habe, diesen Routenparameter

176
00:12:12,680 --> 00:12:19,005
zu ändern, kann ich zwischen verschiedenen Gerichten wechseln und die verschiedenen Gerichte sehen.

177
00:12:19,005 --> 00:12:22,100
Leider habe ich das nicht an Ort und Stelle.

178
00:12:22,100 --> 00:12:25,735
Also muss ich die Schalenkomponenten modifizieren, damit ich das tun kann.

179
00:12:25,735 --> 00:12:31,545
Nun, hier werde ich ein paar Schaltflächen in meine Ansicht einfügen, die, wenn ich klicke,

180
00:12:31,545 --> 00:12:36,390
ich in der Lage sein werde, durch meine Liste der Gerichte zu navigieren.

181
00:12:36,390 --> 00:12:38,960
Nun, um durch meine Liste der Gerichte navigieren

182
00:12:38,960 --> 00:12:42,005
zu können, muss ich das Set aller meiner Gerichte kennen,

183
00:12:42,005 --> 00:12:45,525
oder zumindest muss ich die IDs aller meiner Gerichte kennen.

184
00:12:45,525 --> 00:12:51,410
Das ist der Grund, warum ich diese Dishids hier benutze, okay?

185
00:12:51,410 --> 00:12:58,800
Also, jetzt sehen Sie, warum ich die Dishids-Methode in meinen DishService aufgenommen habe.

186
00:12:58,800 --> 00:13:01,455
Also, dann fange ich an.

187
00:13:01,455 --> 00:13:05,830
Ich werde zuerst

188
00:13:05,830 --> 00:13:10,510
die Dishids erhalten,

189
00:13:10,510 --> 00:13:16,970
indem ich zu

190
00:13:17,070 --> 00:13:22,570
diesem Zeitpunkt die DishService, GetDishids -Methode aufrufe.

191
00:13:22,570 --> 00:13:25,735
Ich arbeite immer noch mit der alten Art, Dinge zu tun.

192
00:13:25,735 --> 00:13:34,795
Ich muss erkennen, dass dieses GetDishids beobachtbar aussendet.

193
00:13:34,795 --> 00:13:39,365
Also, ich muss das beobachtbare abonnieren.

194
00:13:39,365 --> 00:13:43,910
Hier sehen Sie, wie Sie Ihre Denkweise ändern müssen, wenn

195
00:13:43,910 --> 00:13:48,340
Sie mit den Variablen arbeiten.

196
00:13:48,340 --> 00:13:52,840
Also, wir würden sagen, Dishids abonnieren,

197
00:13:52,840 --> 00:13:54,935
und innerhalb des Abonnements

198
00:13:54,935 --> 00:14:00,990
werden wir den Parameter erhalten, der ein String-Array ist,

199
00:14:00,990 --> 00:14:04,170
und dann würde ich sagen, genau dort,

200
00:14:04,170 --> 00:14:09,970
Dishids werden gleich Dishids sein.

201
00:14:09,970 --> 00:14:14,085
Sehen Sie, wie einfach es ist,

202
00:14:14,085 --> 00:14:18,510
Ihre Denkweise zu ändern, wenn Sie mit einem beobachtbaren umgehen wollen.

203
00:14:18,510 --> 00:14:20,895
Also, die GetDishids senden ein Observable,

204
00:14:20,895 --> 00:14:26,790
und ich abonniere dieses Observable und dann habe ich die Dishids hier verfügbar.

205
00:14:26,790 --> 00:14:29,130
Dann auch durch Abonnieren des Parameters.

206
00:14:29,130 --> 00:14:31,500
Wenn ich meinen Parameter ändern kann,

207
00:14:31,500 --> 00:14:35,340
den Wert des Routenparameters innerhalb meines Codes,

208
00:14:35,340 --> 00:14:38,300
dann kann ich zwischen den Gerichten navigieren.

209
00:14:38,300 --> 00:14:41,240
Also, lassen Sie uns diesen Teil implementieren.

210
00:14:41,240 --> 00:14:43,810
Das wird interessant.

211
00:14:43,810 --> 00:14:47,515
Also, um mir das zu ermöglichen,

212
00:14:47,515 --> 00:14:53,190
werde ich hier eine andere Methode namens setPrevNext vorstellen,

213
00:14:55,770 --> 00:15:03,480
und dazu werde ich einen Parameter disHid senden.

214
00:15:03,480 --> 00:15:06,295
Nun, angesichts meiner aktuellen DishiD,

215
00:15:06,295 --> 00:15:11,355
wollte ich in der Lage sein, die vorherige und die nächste Dishid zu finden, so dass ich

216
00:15:11,355 --> 00:15:17,545
meine Navigation zwischen den Gerichten innerhalb meiner dishdetail Komponente implementieren kann.

217
00:15:17,545 --> 00:15:22,635
Also, das ist der Grund, warum ich die Prev und die nächste erklärt.

218
00:15:22,635 --> 00:15:25,555
Jetzt muss ich in der Lage sein, diese beiden Werte zu initialisieren.

219
00:15:25,555 --> 00:15:28,650
Alles, was ich jetzt weiß, ist meine derzeitige DisHid.

220
00:15:28,650 --> 00:15:30,610
Also, mit der aktuellen DisHid,

221
00:15:30,610 --> 00:15:34,265
möchte ich in der Lage sein, die vorherige und die nächste DisHID zu finden.

222
00:15:34,265 --> 00:15:36,080
Also, bei dieser Methode

223
00:15:36,080 --> 00:15:40,255
werde ich die vorherige und die nächste DishID machen.

224
00:15:40,255 --> 00:15:42,160
Also, hier werde ich sagen,

225
00:15:42,160 --> 00:15:50,200
lassen Index gleich diesem Dishids.

226
00:15:50,200 --> 00:15:52,900
Ich kenne nur die ID meines Gerichts,

227
00:15:52,900 --> 00:15:55,360
aber die ID meines Gerichts gibt mir nicht alles.

228
00:15:55,360 --> 00:16:00,980
Ich muss in der Lage sein, das Gericht in diesem Array von IDs zu finden

229
00:16:00,980 --> 00:16:06,510
, also sage ich dies Dishids und IndexOf.

230
00:16:06,510 --> 00:16:13,640
Sie sollten den IndexOf Operator in einem JavaScript-Array kennen.

231
00:16:13,640 --> 00:16:20,935
Der IndexOf-Operator nimmt einen Wert und findet dann den Index dieses Wertes im Array.

232
00:16:20,935 --> 00:16:27,605
Also, indexOf und der Parameter hier,

233
00:16:27,605 --> 00:16:29,945
werde ich geben, ist die DishiD,

234
00:16:29,945 --> 00:16:34,765
die DishiD, die ich in kurzer Zeit erhalten werde.

235
00:16:34,765 --> 00:16:38,765
Jetzt, sobald ich den Index dieses aktuellen Wertes erhalten

236
00:16:38,765 --> 00:16:42,385
habe, kann ich dann

237
00:16:42,385 --> 00:16:49,420
die vorherigen beiden DisHIDs abbilden.

238
00:16:49,420 --> 00:16:59,080
Also, hier

239
00:16:59,080 --> 00:17:08,980
werde ich ein bisschen kniffligen Code hier machen, der es mir erlaubt, umzuspringen, wenn ich bin.

240
00:17:08,980 --> 00:17:15,030
Beachten Sie also, dass dieses disHids-Array dort eine bestimmte Anzahl von Werten enthält.

241
00:17:15,030 --> 00:17:20,270
Wenn mein aktueller Wert meiner DisHID das erste Element ist,

242
00:17:20,270 --> 00:17:24,565
dann ist der vorherige Wert das null indizierte Element in meinem Array.

243
00:17:24,565 --> 00:17:26,590
Aber wenn mein aktueller Wert das Nullelement ist,

244
00:17:26,590 --> 00:17:28,235
das allererste Element in meinem Array,

245
00:17:28,235 --> 00:17:32,530
dann möchte ich umwickeln, um das letzte Element in meinem Array zu erhalten.

246
00:17:32,530 --> 00:17:36,770
Also, hier verwende ich den Modulo-Operator mit einer

247
00:17:36,770 --> 00:17:42,235
mathematischen Art, Dinge zu umwickeln.

248
00:17:42,235 --> 00:17:44,275
Also, ich würde sagen, dieser Dishid

249
00:17:44,275 --> 00:18:14,500
plus Index minus eins, und modulo diese Dishids Länge.

250
00:18:14,500 --> 00:18:15,925
Also, was ich tue, ist,

251
00:18:15,925 --> 00:18:19,590
der vorherige Wert wird der aktuelle Index,

252
00:18:19,590 --> 00:18:21,735
Index des aktuellen Wertes

253
00:18:21,735 --> 00:18:25,935
plus die Länge der Gerichte minus eins sein.

254
00:18:25,935 --> 00:18:27,815
Nun, wenn Index eins ist,

255
00:18:27,815 --> 00:18:29,585
wird Index minus eins mir Null geben.

256
00:18:29,585 --> 00:18:30,680
Wenn der Index Null ist,

257
00:18:30,680 --> 00:18:32,670
gibt mir Index minus eins minus eins,

258
00:18:32,670 --> 00:18:34,210
aber das ist nicht, was ich will.

259
00:18:34,210 --> 00:18:38,190
Ich möchte umwickeln und die Dishid-Länge minus eins bekommen.

260
00:18:38,190 --> 00:18:41,870
Deshalb schließe ich das hier ein

261
00:18:41,870 --> 00:18:44,995
und mache dann ein Modulo mit den Dishids.

262
00:18:44,995 --> 00:18:47,660
Also, wenn Index Null ist,

263
00:18:47,660 --> 00:18:51,915
werde ich umwickeln, um das letzte Element in meinem Array zu erhalten.

264
00:18:51,915 --> 00:18:56,965
So initialisiere ich den vorherigen Wert.

265
00:18:56,965 --> 00:18:59,120
Dann, der nächste Wert,

266
00:18:59,120 --> 00:19:02,700
werde ich den gleichen Ansatz verwenden,

267
00:19:02,770 --> 00:19:08,205
aber umschließen, indem ich Index plus eins sage.

268
00:19:08,205 --> 00:19:11,780
Also, wenn ich derzeit am letzten Element im Array bin,

269
00:19:11,780 --> 00:19:14,200
möchte ich auf Null umwickeln.

270
00:19:14,200 --> 00:19:16,715
Also, das ist der andere Teil von dem, was ich tue.

271
00:19:16,715 --> 00:19:19,200
Also, da setze ich das vorherige und das nächste ein.

272
00:19:19,200 --> 00:19:21,795
Also, wann sollte ich das vorherige und das nächste einstellen?

273
00:19:21,795 --> 00:19:23,965
Jedes Mal, wenn sich mein Gericht ändert,

274
00:19:23,965 --> 00:19:27,630
muss ich in der Lage sein, einen Aufruf dazu zu initiieren.

275
00:19:27,630 --> 00:19:30,590
Nun, wo ändere ich meinen Teller Wert? Wenn Sie

276
00:19:30,590 --> 00:19:34,365
auf das Abonnieren hier zurückblicken,

277
00:19:34,365 --> 00:19:35,905
beachten

278
00:19:35,905 --> 00:19:40,180
Sie, dass Sie Ihr Gericht jedes Mal ändern, wenn sich unsere Parameter ändern.

279
00:19:40,180 --> 00:19:42,035
Also, an diesem Punkt

280
00:19:42,035 --> 00:19:45,495
möchte ich meinen vorherigen und nächsten Wert zurücksetzen.

281
00:19:45,495 --> 00:19:51,940
Also werde ich das hier in einen Codeblock ändern.

282
00:19:51,940 --> 00:19:57,250
Dann würde ich sagen, diese setPrevNext,

283
00:19:57,250 --> 00:20:02,170
und dann wäre der Parameter disHid.

284
00:20:04,370 --> 00:20:07,970
Das ist es. Also, mit dieser Änderung,

285
00:20:07,970 --> 00:20:11,155
was passiert, ist jedes Mal, wenn mein Gericht

286
00:20:11,155 --> 00:20:17,085
aktualisiert wird, Ich werde das vorherige und das nächste auch entsprechend von hier aktualisieren.

287
00:20:17,085 --> 00:20:19,605
Also, mit dieser kleinen Änderung

288
00:20:19,605 --> 00:20:23,150
wird mein DishiD das aktuelle Gericht sein.

289
00:20:23,150 --> 00:20:25,530
Das vorherige wird auf das vorherige Gericht zeigen,

290
00:20:25,530 --> 00:20:28,690
und das nächste wird auf die nächste DishID verwiesen.

291
00:20:28,690 --> 00:20:31,565
Also, ich habe alle drei, die ich brauche.

292
00:20:31,565 --> 00:20:37,460
Jetzt kann ich diese drei Werte nutzen, um die Art und Weise zu implementieren,

293
00:20:37,460 --> 00:20:43,325
zwischen den Gerichten in meiner Vorlage zu navigieren, indem ich ein paar Schaltflächen in meine Vorlage einfüge.

294
00:20:43,325 --> 00:20:48,775
Also, gehen wir zur Vorlage dishdetail Komponenten,

295
00:20:48,775 --> 00:20:53,569
und fügen Sie dann ein paar Schaltflächen, mit denen ich zwischen den Gerichten navigieren kann. Wenn ich

296
00:20:53,569 --> 00:20:58,535
zur Dish Detail Komponente gehe, während ich hier bin,

297
00:20:58,535 --> 00:21:06,150
lass mich dieses NGIF von dieser Karte nehmen und es dann in das div dort oben verschieben.

298
00:21:06,150 --> 00:21:08,445
Ich möchte das gesamte div verbergen,

299
00:21:08,445 --> 00:21:10,850
wenn mein Gericht derzeit nicht defekt ist,

300
00:21:10,850 --> 00:21:13,515
ähnlich für die Kommentare auch.

301
00:21:13,515 --> 00:21:16,440
Ich finde das ein bisschen lästig,

302
00:21:16,440 --> 00:21:19,700
wenn meine Gerichteninformationen vom Server abgerufen werden.

303
00:21:19,700 --> 00:21:24,945
Also, ich werde diese Änderung sowohl für die beiden divs vornehmen, dass

304
00:21:24,945 --> 00:21:32,810
eines die Kommentare und das andere zeigt die Details des Gerichts in der Karte.

305
00:21:32,810 --> 00:21:35,170
Mit diesen beiden Updates,

306
00:21:35,170 --> 00:21:37,210
innerhalb meiner Kartenaktionen,

307
00:21:37,210 --> 00:21:38,605
werde ich

308
00:21:38,605 --> 00:21:49,165
offensichtlich eine weitere Schaltfläche des Tastentyps einschließen und diese Schaltfläche,

309
00:21:49,165 --> 00:21:55,165
Ich werde den RouterLink einschließen.

310
00:21:55,165 --> 00:21:57,320
In dem Moment, in dem

311
00:21:57,320 --> 00:21:58,775
Sie den Router Link sehen, sagen Sie sofort: „Oh,

312
00:21:58,775 --> 00:22:00,620
ich weiß, was Sie versuchen zu tun.

313
00:22:00,620 --> 00:22:04,890
Sie versuchen, diese Schaltfläche zu konvertieren, um zwischen

314
00:22:04,890 --> 00:22:11,720
den verschiedenen Komponenten in meinem Dienst navigieren zu können.“

315
00:22:11,720 --> 00:22:14,000
Also, für den RouterLink,

316
00:22:14,000 --> 00:22:22,870
werde ich ein Array von Werten und das Array von Werten für den RouterLink

317
00:22:22,870 --> 00:22:27,135
zur Verfügung stellen, ich werde dishdetail tun.

318
00:22:27,135 --> 00:22:30,665
Auch der zweite Teil.

319
00:22:30,665 --> 00:22:33,330
Sehen Sie, das ist der interessante Teil.

320
00:22:33,330 --> 00:22:37,125
Der zweite Teil dieses Arrays wird prev sein,

321
00:22:37,125 --> 00:22:43,090
was die Variable ist, die ich in meiner Komponente deklariert habe.

322
00:22:43,090 --> 00:22:52,905
Damit wird dieser Knopf ein Link zum vorherigen Gericht in meiner Liste der Gerichte.

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

324
00:22:55,615 --> 00:23:01,010
Also, mit dem, was sonst?

325
00:23:02,010 --> 00:23:07,550
Lassen Sie mich schließen Sie den Knopf hier und dann innerhalb der Taste,

326
00:23:07,550 --> 00:23:16,890
Ich werde eine Font Awesome Symbol

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

328
00:23:32,670 --> 00:23:37,935
Also, das war's. Diese Schaltfläche wird eine Schaltfläche mit einem Symbol dort sein.

329
00:23:37,935 --> 00:23:40,605
Also, jetzt haben wir einen Knopf hier,

330
00:23:40,605 --> 00:23:43,465
ich werde auch einen anderen Knopf hier einschließen.

331
00:23:43,465 --> 00:23:44,880
Bevor ich den Knopf

332
00:23:44,880 --> 00:23:50,330
einschließe, werde ich span class flex-spacer machen,

333
00:23:50,330 --> 00:23:55,210
du hast mich mit dem Flex-Spacer in einer der früheren Übungen gesehen.

334
00:23:55,210 --> 00:23:56,855
Also, Sie sehen, was ich tue,

335
00:23:56,855 --> 00:24:00,695
ich strecke, um den zweiten Knopf einzuschließen.

336
00:24:00,695 --> 00:24:02,270
Also, für die zweite Schaltfläche,

337
00:24:02,270 --> 00:24:05,040
werde ich das einfach kopieren

338
00:24:06,780 --> 00:24:13,190
und es dann dort einfügen und dann diese aktualisieren, um vorab zu sagen.

339
00:24:13,190 --> 00:24:16,730
Anstelle von vorherigen, werde ich als nächstes gehen und dann

340
00:24:16,730 --> 00:24:23,335
fa-chevron-links nach fa-chevron-right, und das war's.

341
00:24:23,335 --> 00:24:28,049
Speichern wir die Änderungen an unseren Dish Detail Components

342
00:24:28,049 --> 00:24:30,760
und auch den restlichen Dateien.

343
00:24:30,760 --> 00:24:35,340
Nach diesem Update, lassen Sie uns gehen und überprüfen, was unsere Anwendung tut.

344
00:24:35,340 --> 00:24:38,065
Gehen wir zu meiner Anwendung im Browser,

345
00:24:38,065 --> 00:24:40,500
gehen wir zur Menükomponente.

346
00:24:40,500 --> 00:24:46,240
Wir sehen das Menü und wählen Sie einen Eintrag aus dem Menü hier.

347
00:24:46,240 --> 00:24:53,270
Beachten Sie also, dass jetzt dieser Artikel aus der Menüschale hier angezeigt wird.

348
00:24:53,270 --> 00:24:55,225
Beachten Sie unten,

349
00:24:55,225 --> 00:24:58,835
wir haben zwei Tasten hier, links und rechts.

350
00:24:58,835 --> 00:25:01,440
Wenn wir auf die linke Schaltfläche klicken,

351
00:25:01,440 --> 00:25:08,875
beachten Sie, wie wir in der Lage sind, zum vorherigen Gericht in der Liste der Gerichte zu gelangen.

352
00:25:08,875 --> 00:25:15,515
Ich kann weiter links machen und weiter nach links und rechts navigieren.

353
00:25:15,515 --> 00:25:17,980
Beachten Sie, dass, wenn ich dies tue,

354
00:25:17,980 --> 00:25:22,655
meine tatsächliche Ansicht nicht neu geladen wird,

355
00:25:22,655 --> 00:25:25,190
stattdessen werde ich nur

356
00:25:25,190 --> 00:25:34,955
die Dish-bezogenen Daten aus dem Dienst holen und dann meine Ansicht hier aktualisieren.

357
00:25:34,955 --> 00:25:38,350
Der Grund, warum wir dies tun können, ist, weil

358
00:25:38,350 --> 00:25:43,445
wir das beobachtbare, die beobachtbaren Parameter haben.

359
00:25:43,445 --> 00:25:45,890
Also, jedes Mal, wenn ich auf diese beiden klicke,

360
00:25:45,890 --> 00:25:48,860
links und rechts, die Parameter beobachtbar,

361
00:25:48,860 --> 00:25:56,620
bemerken, wie in diesem Moment die Adresse zeigt dishdetail Null.

362
00:25:56,620 --> 00:25:58,315
Wenn ich rechts klicke,

363
00:25:58,315 --> 00:26:02,925
wird das von dishdetail null zu dishdetail eins aktualisiert.

364
00:26:02,925 --> 00:26:07,560
Diese Parameteränderung, und das wird dazu führen, dass meine Beobachtbare

365
00:26:07,560 --> 00:26:12,245
gehen und holen das neue Gericht aus dem Gericht Service.

366
00:26:12,245 --> 00:26:14,980
Dann wird das neue Gericht abgerufen,

367
00:26:14,980 --> 00:26:20,285
die Dishvariable in meiner Komponente wird aktualisiert,

368
00:26:20,285 --> 00:26:21,885
und wenn das aktualisiert wird,

369
00:26:21,885 --> 00:26:23,640
wird meine Ansicht auch aktualisiert.

370
00:26:23,640 --> 00:26:28,185
Also, beachten Sie, dass ich die gleiche Ansicht verwende,

371
00:26:28,185 --> 00:26:36,440
ich bin in der Lage, zwischen den verschiedenen Gerichten zu navigieren, die Teil meiner Liste der Gerichte sind.

372
00:26:36,440 --> 00:26:42,470
Dies ist der interessante Teil, den Sie erhalten können, indem Sie die Parameter verwenden,

373
00:26:42,470 --> 00:26:49,250
die von activator.service innerhalb Ihrer Angular-Anwendung beobachtbar sind.

374
00:26:49,250 --> 00:26:56,355
Interessante Art und Weise der Nutzung von Observables Rechnungen unsere Angular-Anwendung.

375
00:26:56,355 --> 00:26:59,640
Natürlich, so wie ich es implementiert habe,

376
00:26:59,640 --> 00:27:03,210
habe ich es ein bisschen eine künstliche Art gemacht, Dinge zu tun.

377
00:27:03,210 --> 00:27:07,965
Ich musste die Liste der Teller IDs bekommen.

378
00:27:07,965 --> 00:27:12,760
Ich musste das vorherige und das nächste ändern und so weiter.

379
00:27:12,760 --> 00:27:16,360
Wenn Sie eine Möglichkeit hatten, den vorherigen

380
00:27:16,360 --> 00:27:20,000
und den nächsten Wert automatisch von Ihrem Dienst zu erhalten,

381
00:27:20,000 --> 00:27:22,015
wenn Sie ein Gericht holen,

382
00:27:22,015 --> 00:27:26,895
wird die Implementierung der Punktzahl etwas einfacher.

383
00:27:26,895 --> 00:27:28,705
Im Moment haben wir das nicht.

384
00:27:28,705 --> 00:27:33,430
Also habe ich das Problem umgangen, weil ich nur die Art und Weise illustrieren wollte,

385
00:27:33,430 --> 00:27:38,855
ein Observable wie dieses in Ihrer Angular-Anwendung zu verwenden.

386
00:27:38,855 --> 00:27:43,270
Wenn wir den Dienst implementieren können, der den

387
00:27:43,270 --> 00:27:47,320
vorherigen und den nächsten Wert zurückgibt, wenn wir ein Gericht holen,

388
00:27:47,320 --> 00:27:53,640
dann werden all diese Kopfschmerzen viel einfacher gelöst sein.

389
00:27:53,640 --> 00:27:58,810
Lassen Sie uns diese Idee auf einen späteren Zeitpunkt verschieben.

390
00:27:58,810 --> 00:28:01,930
Aber im Moment sehen Sie, wie wir

391
00:28:01,930 --> 00:28:05,250
die beobachtbaren Parameter nutzen, um

392
00:28:05,250 --> 00:28:12,605
eine interessante Möglichkeit zu implementieren, eine neue Funktion innerhalb unserer Angular-Anwendung zu unterstützen.

393
00:28:12,605 --> 00:28:16,325
Damit ist diese Übung abgeschlossen.

394
00:28:16,325 --> 00:28:24,000
Dies ist ein guter Zeitpunkt für Sie, ein Git-Commit mit der Nachricht RXJS Teil zwei zu machen.