1
00:00:03,680 --> 00:00:07,095
Lassen Sie uns nun weiter an

2
00:00:07,095 --> 00:00:12,080
der einseitigen Anwendung arbeiten, die wir in unseren Übungen entwickelt haben.

3
00:00:12,080 --> 00:00:16,480
Bisher haben wir die Home-Komponente,

4
00:00:16,480 --> 00:00:23,610
die Menükomponente und die Kontaktkomponente in unsere einseitige Anwendung integriert.

5
00:00:23,610 --> 00:00:29,080
Die Komponente „Dish Detail“ wird derzeit am unteren Rand der Menükomponente verwendet.

6
00:00:29,080 --> 00:00:32,020
Wenn Sie also auf eines der Elemente im Menü klicken,

7
00:00:32,020 --> 00:00:35,450
werden die Details des Gerichts direkt unten im Menü angezeigt.

8
00:00:35,450 --> 00:00:40,290
Nun werden wir eine weitere Unterstützung nutzen, die das Angular Router Modul bietet,

9
00:00:40,290 --> 00:00:47,820
wodurch wir eine Route mit einem Parameter definieren können, der in der Routendefinition enthalten ist.

10
00:00:47,820 --> 00:00:52,520
Auf diese Weise können wir Informationen an eine andere Komponente weitergeben

11
00:00:52,520 --> 00:00:53,880
und dann von dort aus

12
00:00:53,880 --> 00:00:56,175
Informationen in der anderen Komponente anzeigen.

13
00:00:56,175 --> 00:00:57,770
Wie funktioniert das?

14
00:00:57,770 --> 00:01:01,770
Lasst uns das lernen, indem wir diese Übung machen. Wenn Sie

15
00:01:01,770 --> 00:01:04,755
also zu unserer Anwendung zurückkehren, werden

16
00:01:04,755 --> 00:01:08,140
in dieser Anwendung, wenn Sie auf das Menü schauen,

17
00:01:08,140 --> 00:01:10,205
wenn Sie auf ein Element im Menü klicken,

18
00:01:10,205 --> 00:01:15,920
die Details des ausgewählten Elements direkt unten im Menü angezeigt.

19
00:01:15,920 --> 00:01:19,940
Nun möchte ich die Ansicht der Details

20
00:01:19,940 --> 00:01:24,795
dieses speziellen Gerichts in seine eigene separate Ansicht aufteilen.

21
00:01:24,795 --> 00:01:27,235
Wenn ich auf eines dieser klicke,

22
00:01:27,235 --> 00:01:30,360
möchte ich in der Lage sein, die Details des Gerichts anzuzeigen,

23
00:01:30,360 --> 00:01:34,780
insbesondere in einer Ansicht in dieser Anwendung.

24
00:01:34,780 --> 00:01:39,235
Um dies zu erreichen, werden wir, wie gesagt,

25
00:01:39,235 --> 00:01:43,985
die Routenparameter nutzen, um

26
00:01:43,985 --> 00:01:48,220
diese Art von Verhalten in unserer Anwendung zu unterstützen.

27
00:01:48,220 --> 00:01:50,050
Wie machen wir das?

28
00:01:50,050 --> 00:01:57,025
Lassen Sie uns das tun, indem wir hier mit der Definition einer neuen Route mit einem Parameter beginnen.

29
00:01:57,025 --> 00:02:00,305
Um die Schale Detailkomponente zu nutzen,

30
00:02:00,305 --> 00:02:02,455
gehen wir in die Routen,

31
00:02:02,455 --> 00:02:06,850
und definieren dann eine neue Route nach Menü hier.

32
00:02:06,850 --> 00:02:10,010
Sehen Sie sich die Art und Weise an, wie die Route hier definiert ist.

33
00:02:10,010 --> 00:02:16,595
Also, das ist Pfad, dishdetail.

34
00:02:16,595 --> 00:02:20,225
Also, dieses Gericht Detail ist Teil der Schale Detail Komponente.

35
00:02:20,225 --> 00:02:22,190
Also, es hat seine eigene Sicht.

36
00:02:22,190 --> 00:02:25,330
Jetzt möchte ich in der Lage sein, zu dieser Ansicht zu navigieren,

37
00:02:25,330 --> 00:02:27,890
aber mit einer Parameter-ID,

38
00:02:27,890 --> 00:02:33,750
da in dieser Detailansicht eines der Gerichte in meinem Menü angezeigt wird.

39
00:02:33,750 --> 00:02:38,790
Also, ich möchte in der Lage sein, ein ausgewähltes Gericht im Gericht Detail anzuzeigen.

40
00:02:38,790 --> 00:02:40,710
Nun, das ausgewählte Gericht wird eine ID haben,

41
00:02:40,710 --> 00:02:45,879
und ich möchte diese ID in mein Gericht detaillierte Komponenten übergeben,

42
00:02:45,879 --> 00:02:50,025
damit es die Details dieses bestimmten Gerichts rendern kann.

43
00:02:50,025 --> 00:02:53,480
In Angular Router

44
00:02:53,480 --> 00:02:59,150
unterstützt es die Übergabe von Parametern, indem Routenparameter wie diese

45
00:02:59,150 --> 00:03:02,220
in der Definition des Routers selbst definiert werden.

46
00:03:02,220 --> 00:03:03,260
Also, innerhalb des Pfades,

47
00:03:03,260 --> 00:03:04,525
wenn ich Doppelpunkt sage,

48
00:03:04,525 --> 00:03:10,050
so dass Doppelpunkt von einem Namen gefolgt werden kann, der als Routenparameter fungiert.

49
00:03:10,050 --> 00:03:14,650
Also, in diesem Fall werde ich den Parameternamen als ID verwenden.

50
00:03:14,650 --> 00:03:21,165
Diese ID bezieht sich auf die ID des Gerichts, die wir bereits jedem unserer Gerichte gegeben haben.

51
00:03:21,165 --> 00:03:27,055
Nun, das wird mich zu der Schüssel Detail Komponente bringen.

52
00:03:27,055 --> 00:03:35,040
Also, wir fügen in dieser neuen Route unsere Angular-Routendefinition hier hinzu.

53
00:03:35,040 --> 00:03:36,565
Speichern Sie die Änderungen.

54
00:03:36,565 --> 00:03:39,960
Nun, in der Menükomponente,

55
00:03:39,960 --> 00:03:45,805
also wenn ich die Menükomponenten-Vorlagendatei öffne

56
00:03:45,805 --> 00:03:47,470
,

57
00:03:47,470 --> 00:03:50,350
zeige ich in der Menükomponente das Gericht unten hier an.

58
00:03:50,350 --> 00:03:51,625
Also, ich will das nicht tun.

59
00:03:51,625 --> 00:03:57,335
Also werde ich diesen Teil aus meiner Menükomponenten-Vorlage löschen.

60
00:03:57,335 --> 00:04:01,630
Stattdessen ist mir klar, dass

61
00:04:01,630 --> 00:04:05,015
ich direkt dort auf das jeweilige Gericht zugreifen kann.

62
00:04:05,015 --> 00:04:07,680
Also, wenn das Gericht geklickt wird,

63
00:04:07,680 --> 00:04:10,080
anstatt dies

64
00:04:10,080 --> 00:04:13,490
zu tun, klicken Sie hier, also werde ich diesen Klick entfernen, und stattdessen

65
00:04:13,490 --> 00:04:23,940
werde ich hier einen neuen Parameter definieren, der als RouterLink bezeichnet wird.

66
00:04:25,790 --> 00:04:30,710
Hier sehen Sie die Verwendung des RouterLink.

67
00:04:30,710 --> 00:04:37,460
Nun nimmt dieser RouterLink Werte auf, die Sie in Ihrer Vorlage wie folgt angeben können.

68
00:04:37,460 --> 00:04:42,190
So können Sie das hier als Array bereitstellen.

69
00:04:42,190 --> 00:04:49,550
Innerhalb des Arrays können Sie zwei Teile eines Arrays liefern.

70
00:04:49,550 --> 00:04:51,195
Also, Dishdetail.

71
00:04:51,195 --> 00:04:55,360
Sie haben also gesehen, dass ich, als ich die Route definiert habe, „/dishdetail/:id“ sagte.

72
00:04:56,560 --> 00:05:03,320
Also, der Angular-Router wird den Parameter übergeben, den ich

73
00:05:03,320 --> 00:05:09,340
hier als Teil des zweiten Teils dieser URL gebe.

74
00:05:09,340 --> 00:05:11,700
Also, jetzt, zusammen mit dem Gericht Detail,

75
00:05:11,700 --> 00:05:15,820
werde ich meinen RouterLink mit Gericht Detail konstruieren,

76
00:05:15,820 --> 00:05:19,165
und auch die Gericht ID hier.

77
00:05:19,165 --> 00:05:22,580
Also, dieses Gericht ID bezieht sich auf das spezifische Gericht, das ich

78
00:05:22,580 --> 00:05:26,710
aus der Reihe von Gerichten hier ausgewählt habe.

79
00:05:26,710 --> 00:05:27,950
Also, dieser Teller ID,

80
00:05:27,950 --> 00:05:29,830
ich habe Zugang dazu hier.

81
00:05:29,830 --> 00:05:38,120
Also werde ich das als zweiten Teil in diesem Array von Parametern verwenden

82
00:05:38,120 --> 00:05:41,025
, den ich hier für meinen RouterLink übergeben werde.

83
00:05:41,025 --> 00:05:42,970
Also, wenn ich es so definiere,

84
00:05:42,970 --> 00:05:48,270
dann, wenn ich auf diesen bestimmten Punkt in meinem Menü klicke

85
00:05:48,270 --> 00:05:53,385
, dann

86
00:05:53,385 --> 00:05:55,285
wird diese detaillierte, die Gericht ID, zusammen mit diesem dishdetail, als Router Link übergeben.

87
00:05:55,285 --> 00:05:59,765
Diese Informationen werden nun über

88
00:05:59,765 --> 00:06:04,600
meine Angular-Router zu meinen Dish Detailkomponenten verfügbar sein.

89
00:06:04,600 --> 00:06:09,850
Der Router ermöglicht es also, dass die Komponente „

90
00:06:09,850 --> 00:06:15,060
Dish ID“ diesen Wert von der Angular-Route abruft, wenn diese Informationen an sie übergeben werden.

91
00:06:15,060 --> 00:06:16,880
Wie machen wir das?

92
00:06:16,880 --> 00:06:22,670
Dafür müssen wir auf die Schüssel Detailkomponente gehen und das beheben, um diese Informationen zu erhalten.

93
00:06:22,670 --> 00:06:27,945
Nachdem wir diese Änderungen an der Menükomponente vorgenommen haben,

94
00:06:27,945 --> 00:06:34,090
wechseln wir nun zur Komponente „Dish Detail“.

95
00:06:34,300 --> 00:06:37,610
Im Inneren der Schale Detailkomponente

96
00:06:37,610 --> 00:06:39,950
sehen Sie, dass

97
00:06:39,950 --> 00:06:43,670
ich derzeit das Gericht als Eingabe hier erhalten habe.

98
00:06:43,670 --> 00:06:46,655
Ich werde nicht mehr das Geschirr und Input erhalten.

99
00:06:46,655 --> 00:06:50,295
Also, ich werde das einfach als solches verlassen,

100
00:06:50,295 --> 00:06:51,910
als einfach ein Gericht.

101
00:06:51,910 --> 00:06:58,220
Ich brauche die Eingabe nicht mehr, weil ich diese Informationen nicht mit dem Gericht

102
00:06:58,220 --> 00:07:01,625
in eckigen Klammern übergebe, die ich in meine Menükomponente aufgenommen habe.

103
00:07:01,625 --> 00:07:07,550
Stattdessen diese Informationen über die spezifischen Gerichte kommen durch den Angular Router.

104
00:07:07,550 --> 00:07:11,595
Wie bekomme ich Zugang zu diesem Gericht ID?

105
00:07:11,595 --> 00:07:13,050
Also, um das zu tun,

106
00:07:13,050 --> 00:07:14,870
gehe ich hier rein.

107
00:07:14,870 --> 00:07:24,720
In dieser Anwendung werde ich hier zwei weitere Importe hinzufügen,

108
00:07:24,720 --> 00:07:27,480
einer von ihnen namens Params.

109
00:07:27,480 --> 00:07:30,560
Also, dieser Params gibt mir Zugriff auf

110
00:07:30,560 --> 00:07:35,315
die Router-Parameter, die verfügbar sind, wenn ich hereinkomme.

111
00:07:35,315 --> 00:07:42,855
Also, das ist vom Angular-Router, Params,

112
00:07:42,855 --> 00:07:51,510
und auch ein anderer, den ich brauche, ist der Standort.

113
00:07:51,510 --> 00:07:57,710
Location ermöglicht es mir, den Standort

114
00:07:57,710 --> 00:08:04,060
meiner Seite im Verlauf meines Browsers zu verfolgen.

115
00:08:04,060 --> 00:08:11,185
Also, das wäre nützlich für mich, von meinem Gericht Details zurück zu navigieren, wenn ich muss.

116
00:08:11,185 --> 00:08:14,440
Du wirst sehen, wie ich das etwas später benutze.

117
00:08:14,440 --> 00:08:19,255
Also, zwei Dinge, die ich importieren muss: Params und Location.

118
00:08:19,255 --> 00:08:23,799
Wir werden sehen, wie wir diese beiden in unserer Anwendung nutzen.

119
00:08:23,799 --> 00:08:25,430
Also, zusammen mit diesem,

120
00:08:25,430 --> 00:08:29,420
werden wir in und hier gehen, für den Konstruktor,

121
00:08:29,420 --> 00:08:39,320
jetzt stellen wir fest, dass der Dish-Wert jetzt nicht von meiner Menükomponente verfügbar ist.

122
00:08:39,320 --> 00:08:43,650
Aber stattdessen muss ich explizit gehen und das aus dem DishService holen.

123
00:08:43,650 --> 00:08:45,405
Also, ich werde

124
00:08:45,405 --> 00:08:56,020
den DishService auch in meine Schüssel Detail Komponente importieren.

125
00:09:01,330 --> 00:09:03,960
Dish Service hier.

126
00:09:03,960 --> 00:09:09,820
So wird es mir ermöglichen, ein bestimmtes Gericht aus dem Dish Service zu holen.

127
00:09:09,820 --> 00:09:11,930
Sie erinnern sich also, dass wir bereits

128
00:09:11,930 --> 00:09:15,855
die GetDish-Methode und den Dish Service haben, den wir nutzen können.

129
00:09:15,855 --> 00:09:20,320
Nun, die nächste wichtige Sache für uns ist, die Dish ID zu bekommen.

130
00:09:20,320 --> 00:09:22,800
Nun, wie bekommen wir die Dish ID.

131
00:09:22,800 --> 00:09:25,665
Also, das ist, wo im Konstruktor.

132
00:09:25,665 --> 00:09:29,075
Jetzt muss ich all diese Dienste zur Verfügung stellen,

133
00:09:29,075 --> 00:09:31,230
also werde ich Dish Service sagen.

134
00:09:31,230 --> 00:09:46,250
Dann ist die andere Location.

135
00:09:46,270 --> 00:09:51,275
Also, Location ist ein weiterer Service, der mir zur Verfügung steht.

136
00:09:51,275 --> 00:09:56,010
Also, beide werden in meiner Anwendung verwendet werden.

137
00:09:56,010 --> 00:09:59,325
Also, wenn diese Gerichtenkomponente initialisiert

138
00:09:59,325 --> 00:10:01,890
wird,

139
00:10:01,890 --> 00:10:08,490
kann ich an dieser Stelle in der NGOnInit die Informationen über das spezifische Gericht aus den Params holen.

140
00:10:08,490 --> 00:10:13,120
Also, wie machen wir das? Also,

141
00:10:13,120 --> 00:10:15,800
das ist, wo ich die ID holen werde,

142
00:10:15,800 --> 00:10:19,370
also würde ich sagen, plus das.

143
00:10:19,370 --> 00:10:23,760
Um den Routenwert zu holen,

144
00:10:23,760 --> 00:10:30,565
muss ich einen anderen Dienst namens ActivatedRoute-Dienst injizieren.

145
00:10:30,565 --> 00:10:32,740
Das ist Teil der Angular-Router.

146
00:10:32,740 --> 00:10:39,970
Dieser ActivatedRoute-Dienst bietet mir also Zugriff auf die Route hier.

147
00:10:39,970 --> 00:10:41,940
Also, ich würde sagen,

148
00:10:41,940 --> 00:10:47,770
also muss ich zusammen mit dem DishService auch eine weitere

149
00:10:47,770 --> 00:10:54,305
als Route aufgerufene Route definieren, die hier der ActivatedRoute-Dienst wäre.

150
00:10:54,305 --> 00:10:56,890
Also, all diese drei werden mir zur Verfügung stehen.

151
00:10:56,890 --> 00:11:00,265
Also, genau da, kann ich nach

152
00:11:00,265 --> 00:11:10,840
dieser Route fragen, Snapshot, Params.

153
00:11:10,840 --> 00:11:18,500
Dieser Params ist ein Array, in

154
00:11:18,500 --> 00:11:25,760
das ich mit der ID als Wert indizieren kann, also

155
00:11:25,760 --> 00:11:30,340
Params-ID.

156
00:11:30,340 --> 00:11:34,750
Wenn ich diese URL definiere,

157
00:11:34,750 --> 00:11:41,070
wäre die URL dafür als Dishdetail definiert.

158
00:11:41,070 --> 00:11:43,320
Beispiel: DishDetail 0,

159
00:11:43,320 --> 00:11:47,760
DishDetail 1, DishDetail 2 usw.

160
00:11:47,760 --> 00:11:54,060
So werden die URLs für diese Komponenten dort definiert.

161
00:11:54,060 --> 00:11:56,520
Also, den Wert, den ich hier reinholen werde.

162
00:11:56,520 --> 00:11:59,950
Jetzt, sobald ich die Idee des Gerichts ergriff, dann kann ich sagen,

163
00:11:59,950 --> 00:12:08,125
dieses Gericht gleich DishService

164
00:12:08,125 --> 00:12:17,915
und bekommen Gericht und die GetDish wird die ID als Parameter hier nehmen.

165
00:12:17,915 --> 00:12:26,410
Wenn ich also auf ein Gericht in meiner Menükomponente klicke,

166
00:12:26,410 --> 00:12:31,770
wird dieser Link, den ich den Router-Link habe, den ich dort eingerichtet habe, die Dish-ID an meinen Router als RouterParameter übergeben,

167
00:12:31,770 --> 00:12:34,525
und der wird mir in

168
00:12:34,525 --> 00:12:40,380
meiner DishDetail-Komponente zur Verfügung stehen, indem ich auf den ActivatedRoute-Dienst hier.

169
00:12:40,380 --> 00:12:42,515
Also, sobald ich es ergriff,

170
00:12:42,515 --> 00:12:46,820
dann kann ich diesen Wert verwenden, um das Gericht hier abzufragen.

171
00:12:46,820 --> 00:12:50,630
Nun, das ist nicht die vollständige Art, Dinge zu tun.

172
00:12:50,630 --> 00:12:53,080
Später im nächsten Modul

173
00:12:53,080 --> 00:12:56,120
werden wir etwas namens Reactive JavaScript verwenden.

174
00:12:56,120 --> 00:12:59,640
Dann werde ich zu diesem Zeitpunkt zurückkommen, um dies auf

175
00:12:59,640 --> 00:13:04,870
eine andere Weise neu zu definieren, so dass meine DishDetail-Komponente

176
00:13:04,870 --> 00:13:09,120
alle Änderungen verfolgen kann, die ich an meiner URL vornehme, und

177
00:13:09,120 --> 00:13:14,515
automatisch die Informationen ändern kann, die von dieser Komponente angezeigt werden.

178
00:13:14,515 --> 00:13:19,445
Wir werden dazu in einer der späteren Übungen im nächsten Modul kommen,

179
00:13:19,445 --> 00:13:23,890
aber das funktioniert im Moment gut, also werden wir das verwenden.

180
00:13:23,890 --> 00:13:27,070
Außerdem, wenn ich jetzt zu den Details des Gerichts gehe,

181
00:13:27,070 --> 00:13:30,335
möchte ich in der Lage sein, vom Gericht zum Menü zurückzukehren.

182
00:13:30,335 --> 00:13:36,135
Also werde ich in einer Zurück-Taste meiner Karte einen Zurück-Button hinzufügen,

183
00:13:36,135 --> 00:13:41,905
der mich beim Drücken zum vorherigen Speicherort in meinem Browser zurückbringt.

184
00:13:41,905 --> 00:13:48,230
Um dies zu tun, werde ich hier eine Methode namens GoBack hinzufügen,

185
00:13:50,020 --> 00:13:57,280
die im Wesentlichen

186
00:13:57,280 --> 00:14:03,735
den Standortdienst nutzt, den ich hier oben aufgenommen habe.

187
00:14:03,735 --> 00:14:09,300
Der Location Service bietet eine Methode namens Back, mit

188
00:14:09,300 --> 00:14:15,000
der ich zum vorherigen Element im Browserverlauf zurückkehren kann.

189
00:14:15,000 --> 00:14:19,890
Auf diese Weise werde ich von den Details hier zurück zum Menü navigieren.

190
00:14:19,890 --> 00:14:22,430
Also, diese GoBack-Methode wird hier hinzugefügt.

191
00:14:22,430 --> 00:14:28,160
Jetzt müssen wir die DishDetail-Komponente hier reparieren.

192
00:14:28,160 --> 00:14:32,390
Also, in der DishDetail-Komponenten-Vorlagendatei,

193
00:14:32,390 --> 00:14:36,950
hier haben wir zwei Schaltflächen, die wie und Freigabe-Schaltfläche sind.

194
00:14:36,950 --> 00:14:40,040
Ich werde hier einen weiteren Button hinzufügen.

195
00:14:42,920 --> 00:14:47,155
Für diese Schaltfläche würde ich hinzufügen,

196
00:14:47,155 --> 00:14:49,220
wenn auf diese Schaltfläche geklickt

197
00:14:49,220 --> 00:14:55,330
wird, führt dies zu einem Aufruf der GoBack -Methode, die ich

198
00:14:55,330 --> 00:15:03,430
gerade zu meiner DishDetail komponent.tsfile hinzugefügt habe.

199
00:15:03,430 --> 00:15:10,555
Also, das wäre ein Zurück Button dort.

200
00:15:10,555 --> 00:15:12,625
Während wir dabei sind,

201
00:15:12,625 --> 00:15:16,540
könnten wir auch die Fußzeilenkomponenten Links auch beheben.

202
00:15:16,540 --> 00:15:22,645
Also, gehen Sie zu der footercomponent.htmlDatei unten hier, wo wir diese Links haben,

203
00:15:22,645 --> 00:15:29,785
Ich werde in den RouterLink hier mit

204
00:15:29,785 --> 00:15:38,110
dem Parameter home für den ersten hinzufügen,

205
00:15:38,110 --> 00:15:47,390
und dann Menü für die zweite,

206
00:15:51,240 --> 00:16:00,330
und kontaktieren Sie uns für die dritte in der Fußzeile hier.

207
00:16:00,330 --> 00:16:04,785
Speichern wir die Änderungen.

208
00:16:04,785 --> 00:16:06,615
Wenn Sie nun auf das Menü klicken,

209
00:16:06,615 --> 00:16:09,195
werden hier die Menüpunkte angezeigt.

210
00:16:09,195 --> 00:16:11,895
Wenn wir auf einen der Menüpunkte klicken,

211
00:16:11,895 --> 00:16:20,585
würden Sie feststellen, dass die Details des Gerichts hier in einer separaten Ansicht angezeigt werden.

212
00:16:20,585 --> 00:16:22,900
Diese Details, wie Sie sehen können,

213
00:16:22,900 --> 00:16:26,450
ist genau das, was die DishDetail-Komponente früher angezeigt wurde,

214
00:16:26,450 --> 00:16:29,620
aber am unteren Rand des Menüs in der Menükomponente

215
00:16:29,620 --> 00:16:33,260
haben wir jetzt, dass in einer separaten Ansicht angezeigt wird.

216
00:16:33,260 --> 00:16:35,760
Nun, diese DishDetail-Komponente,

217
00:16:35,760 --> 00:16:39,290
jetzt können Sie zurück zum Menü gehen, indem Sie auf die Schaltfläche Zurück klicken.

218
00:16:39,290 --> 00:16:40,670
Wenn Sie also auf die Schaltfläche Zurück klicken,

219
00:16:40,670 --> 00:16:41,690
sind Sie wieder im Menü.

220
00:16:41,690 --> 00:16:43,490
Wenn Sie auf ein anderes Element klicken,

221
00:16:43,490 --> 00:16:47,575
sehen Sie, dass die Details dieses bestimmten Elements hier angezeigt werden,

222
00:16:47,575 --> 00:16:51,560
ähnlich für den dritten auch und dann können Sie zurückgehen.

223
00:16:51,560 --> 00:16:54,645
Wenn Sie nun auf eines dieser Elemente klicken,

224
00:16:54,645 --> 00:17:02,780
beachten Sie den Wert der URL in der Adressleiste.

225
00:17:02,780 --> 00:17:08,565
Also, dies ist lokaler Host 4.200 Schrägstrich DishDetail Schrägstrich 0.

226
00:17:08,565 --> 00:17:12,080
Diese Null ist die ID dieses Gerichts.

227
00:17:12,080 --> 00:17:14,630
Also, dieser Wert wird übergeben,

228
00:17:14,630 --> 00:17:19,985
und das ist, wie die DishDetail-Komponente hier gezeigt wird, gehen Sie zurück.

229
00:17:19,985 --> 00:17:21,540
Wenn Sie auf das andere Element klicken,

230
00:17:21,540 --> 00:17:27,750
können Sie sehen, dass jetzt in den URLs steht, DishDetail Schrägstrich 1.

231
00:17:27,750 --> 00:17:29,750
In ähnlicher Weise

232
00:17:29,750 --> 00:17:33,390
heißt es für den vierten Schrägstrich DishDetail 3 und so weiter.

233
00:17:33,390 --> 00:17:37,560
Dieser Parameterwert ist also derjenige, der

234
00:17:37,560 --> 00:17:41,210
der DishDetail-Komponente angibt, welches Gericht

235
00:17:41,210 --> 00:17:44,235
von der DishDetail-Komponente angezeigt werden soll.

236
00:17:44,235 --> 00:17:49,250
Das ist, was von der DishDetail-Komponente verwendet wird, um die Informationen zu

237
00:17:49,250 --> 00:17:55,045
diesem bestimmten Gericht mithilfe der GetDishService -Methode abzurufen,

238
00:17:55,045 --> 00:18:01,715
und dann werden diese Informationen in der Ansicht der DishDetail-Komponente angezeigt.

239
00:18:01,715 --> 00:18:03,675
Also, jetzt in dieser Übung

240
00:18:03,675 --> 00:18:09,575
haben wir gelernt, wie wir RouteParameters verwenden können, um Informationen an eine Komponente zu übergeben,

241
00:18:09,575 --> 00:18:14,804
und dann erhält die Komponente Zugriff auf den Parameter und verwendet dann diesen RouteParameter,

242
00:18:14,804 --> 00:18:18,320
um zu entscheiden, wie es

243
00:18:18,320 --> 00:18:22,850
die Ansicht rendert oder die Informationen abruft und die Ansicht entsprechend rendert .

244
00:18:22,850 --> 00:18:26,385
Damit schließen wir diese Übung ab.

245
00:18:26,385 --> 00:18:31,490
Wir haben nun die Konstruktion unserer einseitigen Anwendung

246
00:18:31,490 --> 00:18:37,145
für die Restaurant-Anwendung, an der wir bisher gearbeitet haben, fast abgeschlossen.

247
00:18:37,145 --> 00:18:40,815
Dies ist ein guter Zeitpunkt für Sie, ein Git-Commit mit der Nachricht,

248
00:18:40,815 --> 00:18:44,060
Single-Page-Anwendung Teil 2.