1
00:00:00,000 --> 00:00:07,225
Jetzt, da wir die Datenbindung untersucht haben,

2
00:00:07,225 --> 00:00:10,275
nutzen wir sie für die

3
00:00:10,275 --> 00:00:14,715
Arbeit an der Angular-Anwendung, die wir bisher verwendet haben.

4
00:00:14,715 --> 00:00:17,504
In der vorherigen Version der Angular-Anwendung

5
00:00:17,504 --> 00:00:20,190
hatten wir das Menü gerendert,

6
00:00:20,190 --> 00:00:24,655
und dann hatten wir ein bestimmtes Gericht, das unten gezeigt wurde.

7
00:00:24,655 --> 00:00:28,770
Nun möchten wir idealerweise, dass der Benutzer

8
00:00:28,770 --> 00:00:32,990
auf einen der Menüpunkte und dann auf die Details klicken kann, die dem Benutzer angezeigt werden sollen.

9
00:00:32,990 --> 00:00:37,325
Hier hilft uns die Verwendung der Datenbindung,

10
00:00:37,325 --> 00:00:43,430
unsere Anwendung zu implementieren, um diese Art von Funktion zu ermöglichen. Wenn wir in

11
00:00:43,430 --> 00:00:48,470
den aktuellen Zustand unserer Anwendung im Browser gehen,

12
00:00:48,470 --> 00:00:52,040
können wir jetzt sehen, dass wir unser Menü haben und unten

13
00:00:52,040 --> 00:00:56,370
haben wir die Details eines bestimmten Gerichts, das dort gezeigt wird.

14
00:00:56,370 --> 00:01:01,625
Nun, das ist gut und gut für den Anfang, aber im Idealfall,

15
00:01:01,625 --> 00:01:06,350
was wir möchten, ist, dass, wenn der Benutzer auf eines dieser Gerichte klickt,

16
00:01:06,350 --> 00:01:12,585
wir in der Lage sein wollen, die Details des Gerichts unten im Menü hier anzuzeigen.

17
00:01:12,585 --> 00:01:17,165
Daher möchten wir, dass die Details des Gerichts geändert werden,

18
00:01:17,165 --> 00:01:22,250
basierend auf dem spezifischen Gericht, auf das wir jederzeit klicken.

19
00:01:22,250 --> 00:01:24,100
Also, wie erreichen wir das?

20
00:01:24,100 --> 00:01:28,355
Also, hier kommt die Verwendung von Datenbindung zu unserer Rettung. Wenn Sie

21
00:01:28,355 --> 00:01:31,735
zu unserer Anwendung gehen,

22
00:01:31,735 --> 00:01:35,750
ist das erste, was ich tun werde, im freigegebenen Ordner,

23
00:01:35,750 --> 00:01:39,800
jetzt erkennen Sie, dass die Gerichteninformationen

24
00:01:39,800 --> 00:01:45,090
sowohl in der Menükomponente als auch in der Dish Detailkomponente verwendet werden.

25
00:01:45,090 --> 00:01:49,100
Wenn Sie nun Informationen wie diese freigegeben haben,

26
00:01:49,100 --> 00:01:53,120
wäre es eher bequemer, einen zentralen Ort zu haben

27
00:01:53,120 --> 00:01:57,170
, von dem aus diese Informationen an beide Komponenten geliefert werden.

28
00:01:57,170 --> 00:01:58,880
Um mir zu helfen, das zu tun,

29
00:01:58,880 --> 00:02:03,470
gehe ich zum Freigabeordner und erstelle dann eine neue Datei,

30
00:02:03,470 --> 00:02:09,150
und dann werde ich diese Datei als dishes.ts benennen.

31
00:02:09,150 --> 00:02:11,540
In dieser Datei dishes.ts

32
00:02:11,540 --> 00:02:16,840
werde ich die Konstante erstellen, die die Details des Geschirrs liefert.

33
00:02:16,840 --> 00:02:17,980
Um das zu tun,

34
00:02:17,980 --> 00:02:27,380
würde ich zuerst das Gericht importieren,

35
00:02:27,380 --> 00:02:34,400
aus der Geschirrklasse

36
00:02:34,400 --> 00:02:36,760
, die ich bereits zuvor definiert habe.

37
00:02:36,760 --> 00:02:40,625
Also jetzt kann ich eine

38
00:02:40,625 --> 00:02:48,230
Konstante definieren, die als Gerichte vom Typ ein Gericht Array genannt

39
00:02:48,230 --> 00:02:53,590
wird, und dann werde ich hier die Details aller meiner Gerichte speichern.

40
00:02:53,590 --> 00:02:56,495
Jetzt, in der früheren Version der Anwendung,

41
00:02:56,495 --> 00:03:00,500
haben wir die Verwendung der Gerichte gesehen und wir sahen

42
00:03:00,500 --> 00:03:04,610
das JavaScript-Objekt-Array, das die Details der Gerichte enthält.

43
00:03:04,610 --> 00:03:09,830
Jetzt werden wir all diese Inhalte und mit einer aktualisierten Version davon verschieben.

44
00:03:09,830 --> 00:03:12,485
Also, eine aktualisierte Version der Gerichte

45
00:03:12,485 --> 00:03:16,520
JavaScript-Objekt-Array wird Ihnen in den Anweisungen gegeben,

46
00:03:16,520 --> 00:03:18,065
also gehen Sie einfach und kopieren Sie

47
00:03:18,065 --> 00:03:22,760
das gesamte JavaScript-Objekt-Array von dort und dann fügen wir es hier ein.

48
00:03:22,760 --> 00:03:25,625
Dies wird also der zentrale Ort, von dem aus

49
00:03:25,625 --> 00:03:30,215
die Geschirr Informationen zu Ihrer Anwendung geliefert werden.

50
00:03:30,215 --> 00:03:34,610
Ich habe jetzt die Details des

51
00:03:34,610 --> 00:03:39,770
Gerichts geschnitten und eingefügt, die in den Übungsanweisungen gegeben sind hier,

52
00:03:39,770 --> 00:03:43,640
und so habe ich vier Gerichte hier ein,

53
00:03:43,640 --> 00:03:46,030
zwei drei und vier Gerichte geklebt hier,

54
00:03:46,030 --> 00:03:48,710
und jedes dieser Gerichte enthält natürlich

55
00:03:48,710 --> 00:03:52,560
die Details des spezifischen Gerichts und auch Kommentare für das Gericht.

56
00:03:52,560 --> 00:03:55,610
Auf diese Weise

57
00:03:55,610 --> 00:04:02,360
wird das Rendern der Informationen in der Schüsseldetailvorlage für jedes dieser ausgewählten Gerichte unkompliziert.

58
00:04:02,360 --> 00:04:09,130
Nun, wenn Sie zurückrollen, werden Sie sehen, dass es hier einige rote Linien gibt.

59
00:04:09,130 --> 00:04:16,700
Der Grund für diese roten Linien liegt darin, dass Sie beim Betrachten des Dish-Objekts

60
00:04:16,700 --> 00:04:23,210
sehen, dass wir im Dish-Objekt keine Eigenschaft haben, die als Kommentare bezeichnet wird.

61
00:04:23,210 --> 00:04:26,060
Also, wir müssen eine neue Eigenschaft namens

62
00:04:26,060 --> 00:04:30,480
Kommentare erstellen, um in dieses Gericht hier hinzuzufügen. Also, wie machen wir das?

63
00:04:30,480 --> 00:04:35,060
Also, um das zu tun, werden wir Kommentare sagen und

64
00:04:35,060 --> 00:04:41,275
dann würde ich sagen Kommentarfeld hier.

65
00:04:41,275 --> 00:04:47,690
Jetzt sofort erkennen Sie, dass es kein Kommentararray für uns zur Verfügung steht,

66
00:04:47,690 --> 00:04:50,495
also müssen wir dieses Kommentararray erstellen.

67
00:04:50,495 --> 00:04:54,605
Also, was ich tun werde, ist, dass ich eine andere JavaScript-Klasse erstellen werde

68
00:04:54,605 --> 00:04:59,090
, die die Details des Kommentars dort enthält.

69
00:04:59,090 --> 00:05:17,340
Also, um das zu tun, werde ich zuerst Kommentar aus

70
00:05:17,340 --> 00:05:20,750
der Kommentarklasse hier importieren.

71
00:05:20,750 --> 00:05:25,435
Jetzt sagt mir die rote Linie sofort, dass ich keine Kommentarklasse habe.

72
00:05:25,435 --> 00:05:27,375
Also, wie fügen wir eine Kommentarklasse hinzu?

73
00:05:27,375 --> 00:05:29,500
Also gehen wir in den freigegebenen Ordner,

74
00:05:29,500 --> 00:05:37,940
erstellen wir eine neue Datei namens comment.ts und in diesem comment.ts,

75
00:05:37,940 --> 00:05:48,250
definieren wir hier eine Klasse namens Kommentar.

76
00:05:50,300 --> 00:05:55,695
Jetzt müssen wir bestimmte Eigenschaften für diese Kommentarklasse definieren.

77
00:05:55,695 --> 00:05:57,605
Also, was sind die Eigenschaften, die wir haben?

78
00:05:57,605 --> 00:06:00,890
Werfen wir einen kurzen Blick auf unsere Datei dishes.ts

79
00:06:00,890 --> 00:06:05,310
und dann werden wir sehen, was die Eigenschaften für jeden Kommentar sind. Wenn Sie

80
00:06:06,170 --> 00:06:09,085
zur Datei dishes.ts gehen,

81
00:06:09,085 --> 00:06:11,555
sehen Sie, dass die Kommentare

82
00:06:11,555 --> 00:06:15,470
eine Eigenschaft enthält, die als Bewertung bezeichnet wird, die eine Zahl zu sein scheint,

83
00:06:15,470 --> 00:06:18,110
dann haben Sie einen Kommentar, der eine Zeichenfolge und einen

84
00:06:18,110 --> 00:06:21,490
Autor ist, der eine Zeichenfolge und ein Datum ist, das auch eine Zeichenfolge ist.

85
00:06:21,490 --> 00:06:26,690
Also, wir müssen hier vier Eigenschaften für meine Kommentarklasse definieren.

86
00:06:26,690 --> 00:06:30,075
Also, wenn ich zurück zur Kommentarklasse gehe,

87
00:06:30,075 --> 00:06:34,770
würde ich die Bewertung als Zahl definieren.

88
00:06:34,770 --> 00:06:37,410
Also, im Typ Skript,

89
00:06:37,410 --> 00:06:47,575
alles ist eine Zahl hier, dann hatten wir einen Kommentar, der ein String-Autor

90
00:06:47,575 --> 00:06:49,480
ist, der auch eine Zeichenfolge ist,

91
00:06:49,480 --> 00:06:56,500
und dann Datum, das auch eine Zeichenfolge hier ist.

92
00:06:56,500 --> 00:07:01,130
Also, das sind die vier Eigenschaften, die wir hier haben.

93
00:07:01,130 --> 00:07:09,620
Nun, offensichtlich haben wir gesehen, wie wir die Datumszeichenfolge in der vorherigen Übung verwenden,

94
00:07:09,620 --> 00:07:13,040
und in der Zuweisung, wie wir

95
00:07:13,040 --> 00:07:17,410
die Datumszeichenfolge verwendet haben, um dort das Datum für den Kommentar anzuzeigen.

96
00:07:17,410 --> 00:07:19,755
Nun, für den Fall, dass Sie sich fragen,

97
00:07:19,755 --> 00:07:22,540
was enthält diese Datumszeichenfolge tatsächlich? Wenn Sie

98
00:07:22,540 --> 00:07:28,260
hier gehen, werden Sie sehen, dass diese Datumszeichenfolge ein bestimmtes Format hat.

99
00:07:28,260 --> 00:07:32,165
Dies ist also das Standardformat zum Speichern eines Datums hier.

100
00:07:32,165 --> 00:07:38,230
Dieses Datumsformat ist die ISO-OSI-Methode, um das Datumsformat anzugeben.

101
00:07:38,230 --> 00:07:39,775
Also, wir werden das nur verwenden,

102
00:07:39,775 --> 00:07:42,670
also ist dies ein standardisiertes Format, das auch in

103
00:07:42,670 --> 00:07:48,430
vielen Programmiersprachen verwendet wird, mit dem Sie die Daten hier als String speichern können,

104
00:07:48,430 --> 00:07:51,500
also werde ich es hier nur als solches nutzen.

105
00:07:51,500 --> 00:07:55,405
Nachdem wir

106
00:07:55,405 --> 00:08:02,230
hier die Änderungen an der Datei dish.ts vorgenommen haben und dann auch die Kommentarklasse hier hinzugefügt

107
00:08:02,230 --> 00:08:08,420
haben, sehen wir jetzt, dass die Datei dishes.ts diese roten Linien nicht mehr hat, da

108
00:08:08,420 --> 00:08:18,325
der Kommentar als Objekt-Array zu meiner Dish-Klasse hier hinzugefügt wurde.

109
00:08:18,325 --> 00:08:22,470
Also, das funktioniert bis jetzt gut.

110
00:08:22,470 --> 00:08:24,530
Nun, wie nutzen wir das?

111
00:08:24,530 --> 00:08:25,935
Nun, um dies zu nutzen,

112
00:08:25,935 --> 00:08:28,755
werden wir zum Menü component.ts gehen,

113
00:08:28,755 --> 00:08:32,050
und dann haben wir hier diese Konstante definiert.

114
00:08:32,050 --> 00:08:34,760
Nun, das ist nicht der richtige Weg, es

115
00:08:34,760 --> 00:08:38,845
später zu tun, werden Sie sehen, wie ich einen Dienst für all das benutze.

116
00:08:38,845 --> 00:08:49,075
Also, lassen Sie mich diese Konstante von hier komplett ausschneiden und anstatt diese Konstante

117
00:08:49,075 --> 00:08:54,880
zu verwenden, werde ich jetzt Gerichte

118
00:08:54,880 --> 00:09:01,600
aus dem freigegebenen Ordner

119
00:09:01,600 --> 00:09:07,225
hier importieren, gemeinsame Gerichte hier.

120
00:09:07,225 --> 00:09:12,875
Beachten Sie also, dass dieser Geschirr Ordner die Gerichte Konstante hier exportiert.

121
00:09:12,875 --> 00:09:17,250
Also, das ist der Grund, warum wir es nutzen können.

122
00:09:17,250 --> 00:09:20,080
Also, wenn ich zu den Gerichten hier zurückgehe,

123
00:09:20,080 --> 00:09:22,600
muss ich das von hier exportieren,

124
00:09:22,600 --> 00:09:25,500
also würde ich sagen, Export.

125
00:09:25,500 --> 00:09:28,285
Konstante. Also, wenn ich das mache,

126
00:09:28,285 --> 00:09:33,985
dann sehe ich in meiner Menükomponente, dass meine Gerichte hier richtig importiert werden können.

127
00:09:33,985 --> 00:09:40,150
Dann wird der Rest des Codes hier problemlos ohne Änderungen funktionieren.

128
00:09:40,500 --> 00:09:46,190
Sie werden sehen, dass, wenn Sie die Werte jetzt

129
00:09:46,190 --> 00:09:51,190
und dann, wenn Sie sich Ihre Webanwendung im Browser ansehen,

130
00:09:51,190 --> 00:09:55,655
es gut rendert, auch nach diesen Änderungen.

131
00:09:55,655 --> 00:10:00,110
Nachdem Sie alle Änderungen gespeichert haben, die Sie bisher in allen Dateien vorgenommen haben,

132
00:10:00,110 --> 00:10:01,810
wenn Sie sich Ihre Webseite ansehen, wird

133
00:10:01,810 --> 00:10:05,360
Ihre Webseite wie zuvor gerendert.

134
00:10:05,360 --> 00:10:09,025
Nun, der zweite Teil des Problems.

135
00:10:09,025 --> 00:10:11,390
Wir wollen in der Lage sein, zu kommunizieren.

136
00:10:11,390 --> 00:10:15,640
Wenn wir auf einen dieser Menüpunkte klicken,

137
00:10:15,640 --> 00:10:18,415
möchten wir in der Lage sein, diese Informationen so zu kommunizieren, dass

138
00:10:18,415 --> 00:10:21,640
das entsprechende Gericht hier gerendert wird.

139
00:10:21,640 --> 00:10:23,620
Also, hier werden wir die Hilfe der

140
00:10:23,620 --> 00:10:27,100
Datenbindung nehmen, die wir bisher gelernt haben.

141
00:10:27,100 --> 00:10:33,505
Zurück zu der Menükomponenten-Vorlagendatei,

142
00:10:33,505 --> 00:10:36,600
was wir tun werden, ist, dass für

143
00:10:36,600 --> 00:10:41,675
diese „app-dishdetail“, die Sie am unteren Rand hier,

144
00:10:41,675 --> 00:10:48,570
um in der Schüssel Detail Komponenten Vorlage hinzufügen, um die Menükomponenten-Vorlage,

145
00:10:48,570 --> 00:10:53,440
werden wir in eine Eigenschaft namens Dish hinzufügen.

146
00:10:53,440 --> 00:10:59,520
Dann werden wir dies zuweisen „selectedDish“.

147
00:10:59,520 --> 00:11:03,550
Sie werden sich daran erinnern, dass das ausgewählte Gericht eine Variable ist, die wir

148
00:11:03,550 --> 00:11:08,385
in unserem Menü Komponenten TypeScript Datei hier definiert haben.

149
00:11:08,385 --> 00:11:12,020
Also, auf diese Weise; dieser Wert dieses ausgewählten Gerichts

150
00:11:12,020 --> 00:11:15,905
wird hier durch diese Eigenschaft Gericht übergeben.

151
00:11:15,905 --> 00:11:20,860
Jetzt werden wir sehen, wie die Komponente „Detail“ diese Informationen abrufen kann

152
00:11:20,860 --> 00:11:25,670
und sie dann im nächsten Schritt in der Übung gut nutzen kann.

153
00:11:25,670 --> 00:11:27,655
Nun, während wir hier sind,

154
00:11:27,655 --> 00:11:33,345
werden wir auch das andere Problem beheben, mit dem wir uns befassen müssen.

155
00:11:33,345 --> 00:11:40,155
Das heißt, wenn eines der Menüelemente geklickt wird,

156
00:11:40,155 --> 00:11:44,215
dann wird es ein Click-Ereignis erzeugen und wir möchten, dass diese Informationen

157
00:11:44,215 --> 00:11:49,475
an unsere Menükomponente TypeScript-Datei geliefert werden.

158
00:11:49,475 --> 00:11:56,960
Also, um das zu tun, gehen wir in Menürasterlisten, die wir hier definiert haben.

159
00:11:56,960 --> 00:11:59,395
Für diese Grid-Kachel hier,

160
00:11:59,395 --> 00:12:04,945
was ich tun werde, ist, das Click-Ereignis hier zu definieren.

161
00:12:04,945 --> 00:12:06,910
Also, für das Click-Ereignis,

162
00:12:06,910 --> 00:12:11,870
was ich tun werde, ist,

163
00:12:11,870 --> 00:12:19,005
dass ich die Auswahlmethode aufrufen werde, die ich in meiner Menükomponente.ts-Datei definieren werde.

164
00:12:19,005 --> 00:12:20,880
Zu dieser onSelect Methode

165
00:12:20,880 --> 00:12:25,975
werde ich das Gericht als Parameter hier liefern.

166
00:12:25,975 --> 00:12:27,315
Was ist das für ein Gericht?

167
00:12:27,315 --> 00:12:30,670
Dieses Gericht ist genau dieses Gericht, das Sie in

168
00:12:30,670 --> 00:12:35,785
diesem „Gericht lassen“ in der NGFor Syntax hier ausgewählt haben.

169
00:12:35,785 --> 00:12:38,290
Also, dieses spezielle Gericht,

170
00:12:38,290 --> 00:12:41,390
aus der Reihe von Gerichten, die Sie hier ausgewählt haben,

171
00:12:41,390 --> 00:12:45,980
wird als Parameter an diese onSelect Methode übergeben,

172
00:12:45,980 --> 00:12:50,555
was wir in unserer Menükomponente.ts Datei implementieren werden.

173
00:12:50,555 --> 00:12:52,465
Also, jetzt, da wir dies getan haben,

174
00:12:52,465 --> 00:12:56,175
ist dies der Handler, der implementiert werden muss.

175
00:12:56,175 --> 00:12:59,960
Lassen Sie uns auf die Menükomponentendatei gehen und dann

176
00:12:59,960 --> 00:13:04,195
diese Datei reparieren, um diesen Handler dort zu implementieren.

177
00:13:04,195 --> 00:13:08,490
Wenn Sie also einen Klick auf einen der Menüpunkte machen,

178
00:13:08,490 --> 00:13:10,695
wird der entsprechende Handle aufgerufen und

179
00:13:10,695 --> 00:13:15,605
die spezifischen Gerichteninformationen werden hier als Parameter übergeben.

180
00:13:15,605 --> 00:13:19,790
Gehen Sie zu Menü component.ts Datei, jetzt,

181
00:13:19,790 --> 00:13:25,545
wird dem ausgewählten Gericht ein Wert zugewiesen, basierend auf dem Gericht, das ich wählen.

182
00:13:25,545 --> 00:13:29,600
Also, ich werde diesen Teil entfernen und dann direkt unten hier

183
00:13:29,600 --> 00:13:34,660
werde ich die onSelect Methode hier implementieren.

184
00:13:34,660 --> 00:13:37,715
Also, für die OnSelect Methode,

185
00:13:37,715 --> 00:13:45,525
wird dies einen Parameter erhalten, der der Dish Parameter ist.

186
00:13:45,525 --> 00:13:47,820
Wenn dieser Dish-Parameter hereinkommt,

187
00:13:47,820 --> 00:13:55,705
werde ich diesen SelectedDish gleich dish zuweisen,

188
00:13:55,705 --> 00:14:02,420
den Parameter, der hier als Wert für die onSelect -Methode eintrat.

189
00:14:02,420 --> 00:14:03,895
Also, das ist es.

190
00:14:03,895 --> 00:14:08,410
Wenn Sie also auf eines dieser Elemente im Menü klicken, auf

191
00:14:08,410 --> 00:14:10,780
eines der Gerichte im Menü,

192
00:14:10,780 --> 00:14:15,090
werden diese Gerichte Informationen durch diese weitergegeben und dann

193
00:14:15,090 --> 00:14:20,670
wird das ausgewählte Gericht diesem Gericht zugewiesen.

194
00:14:20,670 --> 00:14:25,415
Jetzt haben wir, wie die Informationen aus dem DOM kommen.

195
00:14:25,415 --> 00:14:29,280
Der spezifische Klick führt dazu, dass

196
00:14:29,280 --> 00:14:33,875
uns die Gerichteninformationen zur Verfügung stehen und dem ausgewählten Gericht wird dieser Wert zugewiesen.

197
00:14:33,875 --> 00:14:38,755
Nun, zurück zu der Menükomponente HTML-Datei,

198
00:14:38,755 --> 00:14:45,240
sehen wir, dass wir bereits diese Dish Eigenschaft SelectedDish zugewiesen haben.

199
00:14:45,240 --> 00:14:48,730
Auf diese Weise wird dieser ausgewählte Dishwert

200
00:14:48,730 --> 00:14:53,980
durch diese Dish-Eigenschaft an dieses app-dishdetail hier übergeben.

201
00:14:53,980 --> 00:14:57,990
Nun, wie bekommt meine Gericht-Detailkomponente diese Informationen?

202
00:14:57,990 --> 00:15:02,225
Dafür gehen wir zum Gericht Detail Komponente und beheben das.

203
00:15:02,225 --> 00:15:05,185
Gehen Sie zu der Schüssel Detailkomponente,

204
00:15:05,185 --> 00:15:08,395
das erste, was ich tun werde, ist

205
00:15:08,395 --> 00:15:13,370
dieses Gericht Konstante aus meiner Schüssel Detailkomponente löschen.

206
00:15:13,370 --> 00:15:14,985
Ich brauche es nicht mehr.

207
00:15:14,985 --> 00:15:18,490
Nun, wenn eine Eigenschaft gebunden wird,

208
00:15:18,490 --> 00:15:22,715
wie das, was wir in der Menükomponente HTML-Datei gesehen haben,

209
00:15:22,715 --> 00:15:25,900
dann

210
00:15:25,900 --> 00:15:32,035
kann ich in meiner Dish Detaildatei ein anderes Modul verwenden, das als Eingabemodul bezeichnet wird.

211
00:15:32,035 --> 00:15:35,505
Dann, für dieses Gericht,

212
00:15:35,505 --> 00:15:39,555
werde ich das einfach als DISH erklären.

213
00:15:39,555 --> 00:15:45,095
Nun, dieses Eingabemodul ermöglicht es mir, einen Dekorator

214
00:15:45,095 --> 00:15:50,905
für diese Dish Variable zu deklarieren, die ich hier definiert habe

215
00:15:50,905 --> 00:15:57,800
, bei Eingabe mit der Klammer hier zu diesem Gericht hier.

216
00:15:57,800 --> 00:16:01,025
Dann muss ich auch

217
00:16:01,025 --> 00:16:10,010
die Gericht Klasse

218
00:16:10,010 --> 00:16:18,975
aus dem gemeinsamen Gericht hier importieren.

219
00:16:18,975 --> 00:16:24,610
Also, damit, was passiert ist, ist, dass ich das Eingabemodul verwende.

220
00:16:24,610 --> 00:16:30,655
Auf diese Weise können Sie Informationen aus einer anderen Komponente in eine Komponente liefern.

221
00:16:30,655 --> 00:16:33,650
Sie binden eine Eigenschaft in der Vorlage

222
00:16:33,650 --> 00:16:37,460
der anderen Komponente, wie wir im Menü component.html Datei gesehen haben,

223
00:16:37,460 --> 00:16:41,550
und dann wird das als Eingabe für diese Komponente verfügbar sein, indem Sie

224
00:16:41,550 --> 00:16:47,070
eine Variable deklarieren und dann Eingabe-Dekorator dafür aufrufen.

225
00:16:47,070 --> 00:16:51,400
Lassen Sie uns nun die Änderungen an allen Dateien speichern, die wir vorgenommen haben

226
00:16:51,400 --> 00:16:56,990
und dann einen Blick auf die Winkelreplikation werfen. Wenn wir in

227
00:16:56,990 --> 00:17:00,140
unseren Browser gehen,

228
00:17:00,140 --> 00:17:02,260
sehen wir, dass in dieser Angular-Replikation

229
00:17:02,260 --> 00:17:04,000
hier nichts angezeigt wird.

230
00:17:04,000 --> 00:17:07,470
Denn gerade jetzt, das ausgewählte Gericht,

231
00:17:07,470 --> 00:17:11,120
haben wir keines der Gerichte ausgewählt, so dass auch das ausgewählte Gericht

232
00:17:11,120 --> 00:17:14,985
ist ein leeres Objekt dort.

233
00:17:14,985 --> 00:17:23,050
Also verwenden wir das NGIF in der Vorlage für das Gericht Detail. Wenn Sie

234
00:17:23,050 --> 00:17:27,765
sich also einen kurzen Blick auf die Schüsseldetailvorlage werfen,

235
00:17:27,765 --> 00:17:31,810
haben Sie dies als Teil Ihrer Aufgabe implementiert.

236
00:17:31,810 --> 00:17:38,315
Also sollten Sie das nGIF mit dem Gericht sowohl für den Code

237
00:17:38,315 --> 00:17:41,400
als auch für die MD-Liste dort verwenden.

238
00:17:41,400 --> 00:17:44,125
Also, wenn Sie das tun,

239
00:17:44,125 --> 00:17:47,705
dann, wenn das Gericht derzeit nicht ausgewählt ist,

240
00:17:47,705 --> 00:17:50,175
wird unten nichts angezeigt.

241
00:17:50,175 --> 00:17:53,255
Aber in dem Moment, in dem ich auf eines der Gerichte klicke,

242
00:17:53,255 --> 00:17:58,005
sehen Sie sofort die Details des Gerichts, das hier unten angezeigt wird.

243
00:17:58,005 --> 00:18:00,840
Jetzt kann ich das zweite Gericht auswählen und dann sofort

244
00:18:00,840 --> 00:18:06,000
werden Sie feststellen, dass die unten angezeigten Gerichtendetails geändert werden.

245
00:18:06,000 --> 00:18:11,505
Also, jedes Mal, wenn ich auf eines dieser Gerichte klicke,

246
00:18:11,505 --> 00:18:15,670
werden die Details dieses spezifischen Gerichts, einschließlich der Kommentare, unten hier angezeigt.

247
00:18:15,670 --> 00:18:20,710
Das ist also genau das, was wir in dieser speziellen Übung erreichen wollen.

248
00:18:20,710 --> 00:18:27,855
Hier haben Sie also die Verwendung von Datenbindung gesehen, drei verschiedene Arten,

249
00:18:27,855 --> 00:18:31,970
einschließlich der Ereignis- und Ereignisbehandlungsroutine,

250
00:18:31,970 --> 00:18:37,110
und Sie haben auch gesehen, wie wir das Eingabemodul nutzen können, um

251
00:18:37,110 --> 00:18:42,855
Informationen in eine Komponente abrufen zu können, die von einer anderen Komponente eingeht.

252
00:18:42,855 --> 00:18:45,820
Damit schließen wir diese Übung ab,

253
00:18:45,820 --> 00:18:48,750
in der wir gelernt haben, verschiedene

254
00:18:48,750 --> 00:18:56,005
Datenbindungsfunktionen in Angular zu nutzen, um unsere Anwendung zu implementieren.

255
00:18:56,005 --> 00:19:02,010
Dies ist ein guter Zeitpunkt für Sie, ein Git-Commit mit der Nachrichtendatenbindung zu machen.