1
00:00:00,000 --> 00:00:04,711
[MUSIK]

2
00:00:04,711 --> 00:00:06,798
Wenn Sie eine statische Website haben,

3
00:00:06,798 --> 00:00:11,735
dann haben Sie alle Daten, die Sie benötigen, um Ihre Website zu erstellen.

4
00:00:11,735 --> 00:00:17,790
Und es wird einmal erstellt und Ihre Website ist einsatzbereit.

5
00:00:17,790 --> 00:00:23,208
Aber viele Websites werden heutzutage von Daten aus dem Backend gesteuert.

6
00:00:23,208 --> 00:00:27,721
Ihre Webanwendung ruft Daten von einem Backend-Server ab und

7
00:00:27,721 --> 00:00:32,667
verwendet dann die Daten, um Inhalte auf Ihrer Website dynamisch zu gestalten oder

8
00:00:32,667 --> 00:00:35,474
sogar Inhalte auf Ihrer Website zu aktualisieren.

9
00:00:35,474 --> 00:00:40,090
Dies erfordert also, dass die Daten vom Backend durch

10
00:00:40,090 --> 00:00:43,410
Ihre Webanwendung zum DOM fließen.

11
00:00:43,410 --> 00:00:49,161
Und jede Benutzerinteraktion auf dem DOM sollte zurück an Ihre Webanwendung übertragen werden.

12
00:00:49,161 --> 00:00:54,211
Dies erfordert

13
00:00:54,211 --> 00:00:59,920
beispielsweise die Kommunikation zwischen dem DOM und Ihrer Komponente im eckigen Framework.

14
00:00:59,920 --> 00:01:03,268
Schauen wir uns an, wie dies innerhalb des eckigen Rahmens geschieht und

15
00:01:03,268 --> 00:01:04,880
mit ein wenig mehr Details.

16
00:01:06,900 --> 00:01:11,420
Was wir bisher gelernt haben, ist, wie eine Komponente vorbereitet wird.

17
00:01:11,420 --> 00:01:17,129
So haben wir gesehen, dass die Komponente zwei Hauptteile hat, die

18
00:01:17,129 --> 00:01:24,380
Typoskriptdatei, in der die Architektur der Komponente definiert ist, und die Eigenschaften.

19
00:01:24,380 --> 00:01:29,480
Und die Methoden von und dann haben Sie die Vorlage, die

20
00:01:29,480 --> 00:01:34,430
definiert, wie der Inhalt angelegt und in das DOM hinzugefügt wird.

21
00:01:34,430 --> 00:01:38,410
Die Vorlage ist also diejenige, die von einer Komponente geliefert wird, um

22
00:01:38,410 --> 00:01:41,640
einen Teil Ihrer Webseite zu besetzen.

23
00:01:41,640 --> 00:01:45,870
Die Vorlage bildet also das Kommunikationsmedium zu Ihrem DOM.

24
00:01:45,870 --> 00:01:52,210
Und diese Vorlage erfordert, dass Daten von Ihrer Komponente abgerufen werden,

25
00:01:53,450 --> 00:02:00,040
um Teile des Inhalts in Ihrer Vorlage und

26
00:02:00,040 --> 00:02:04,105
entsprechend innerhalb des DOM Ihrer Webseite zu rendern.

27
00:02:05,250 --> 00:02:11,662
Wenn Sie nun nicht den Luxus eines Frameworks wie Angular hatten,

28
00:02:11,662 --> 00:02:16,442
müssen Sie sich mit den gesamten Details darüber beschäftigen, wie

29
00:02:16,442 --> 00:02:21,586
die Daten von der Anwendungssite zum DOM fließen.

30
00:02:21,586 --> 00:02:25,696
Und wie die Benutzerinteraktionsereignisse,

31
00:02:25,696 --> 00:02:29,980
die im DOM verursacht werden, an Ihre Anwendung zurückgesendet werden.

32
00:02:29,980 --> 00:02:33,851
Glücklicherweise

33
00:02:33,851 --> 00:02:38,520
unterstützen sie mit Frame funktioniert wie Angular, all diese Verhaltensweisen von Natur aus.

34
00:02:38,520 --> 00:02:44,047
Jetzt haben wir bereits eine Verwendung des Datenflusses von einer

35
00:02:44,047 --> 00:02:48,504
Komponenteneigenschaft zur Vorlage in den vorherigen Übungen gesehen.

36
00:02:48,504 --> 00:02:54,433
Wo wir die doppelten geschweiften Klammern verwendet haben, um Informationen, die

37
00:02:54,433 --> 00:03:02,050
aus einer Variablen im TypeScript-Code Ihrer Komponente stammen, an Ihre Vorlage zu liefern.

38
00:03:02,050 --> 00:03:03,830
Wir werden uns andere Wege ansehen, und

39
00:03:03,830 --> 00:03:08,670
dann auch in der folgenden Übung werden wir dies nutzen,

40
00:03:08,670 --> 00:03:14,370
um die Winkelanwendung zu modifizieren, die wir bisher entwickelt haben.

41
00:03:15,570 --> 00:03:18,975
Was wir bisher gesprochen haben, ist die Datenbindung,

42
00:03:18,975 --> 00:03:23,972
ein Mechanismus, um den Informationsfluss zwischen der Vorlage und der

43
00:03:23,972 --> 00:03:27,468
Komponente oder zwischen dem DOM und der Komponente zu koordinieren.

44
00:03:27,468 --> 00:03:30,627
Auf der Komponentenebene handelt es sich um eine Art Eigenschaft oder

45
00:03:30,627 --> 00:03:35,215
eine Methode, die entweder der Vorlage übergeben oder vom DOM aufgerufen werden muss.

46
00:03:35,215 --> 00:03:38,269
Oder auf der Vorlagenseite können einige Informationen sein,

47
00:03:38,269 --> 00:03:41,890
die von der Vorlage benötigt werden, um in das DOM oder

48
00:03:41,890 --> 00:03:45,905
sogar aus dem DOM gerendert zu werden, das erfasst und an Ihre Komponente zurückgesendet wird.

49
00:03:45,905 --> 00:03:50,886
All dies erfordert also Daten, die von der Komponente zur

50
00:03:50,886 --> 00:03:55,868
Vorlage oder von Ereignissen fließen, die aus dem DOM gesammelt

51
00:03:55,868 --> 00:04:01,735
werden oder an Ihre Komponente zurückgesendet werden, damit sie auf diese Ereignisse reagieren kann.

52
00:04:01,735 --> 00:04:07,967
Jetzt kann dies leicht im Winkelrahmen mit vier verschiedenen

53
00:04:07,967 --> 00:04:14,850
Arten von Informationsfluss behandelt werden, die wir in der nächsten Folie zusammenfassen werden.

54
00:04:14,850 --> 00:04:19,150
Zurück zur Interaktion zwischen Komponente und Vorlage

55
00:04:19,150 --> 00:04:22,820
haben wir bereits die erste Art der Interaktion zwischen der Komponente und

56
00:04:22,820 --> 00:04:27,800
der Vorlage gesehen, bei der der Wert einer Eigenschaft in die Vorlage fließt.

57
00:04:27,800 --> 00:04:31,130
So sahen wir die Verwendung des Gerichtennamens,

58
00:04:31,130 --> 00:04:35,720
der Beschreibung des Gerichts, der Beschreibung der Gerichte und so

59
00:04:35,720 --> 00:04:40,910
weiter, die geliefert wurden, um Informationen in Ihrer Vorlage zu rendern. In

60
00:04:40,910 --> 00:04:47,210
diesem Fall haben wir die doppelten Klammern verwendet, um die Tatsache einzuschließen, dass

61
00:04:47,210 --> 00:04:53,030
ein Wert aus Ihrer Komponente in Ihrer Vorlage verwendet wird.

62
00:04:53,030 --> 00:04:58,160
Eine andere Art von Informationsfluss, den Sie sehen werden, ist, wo

63
00:04:58,160 --> 00:05:04,930
Sie eine Art von Eigenschaft angeben, die mit einem Tag in eckigen Klammern verknüpft ist.

64
00:05:04,930 --> 00:05:11,670
Weisen Sie es dann als Wert aus einer der Eigenschaften in Ihrer Komponente zu.

65
00:05:12,790 --> 00:05:17,010
Diese Art von Ansatz werden wir in der Übung sehen, die

66
00:05:17,010 --> 00:05:19,210
unmittelbar nach diesem Vortrag folgt.

67
00:05:19,210 --> 00:05:22,160
Also hier würden wir etwas in eckigen Klammern angeben.

68
00:05:22,160 --> 00:05:23,100
Also achten Sie auf

69
00:05:23,100 --> 00:05:28,880
ein Beispiel dafür in der Übung, wo ich mehr darüber diskutieren werde.

70
00:05:28,880 --> 00:05:32,640
Wenn Sie ein Ereignis in der Nähe von DOM generiert haben

71
00:05:32,640 --> 00:05:36,840
, kann dieses Ereignis zum Aufruf eines Handlers oder

72
00:05:36,840 --> 00:05:42,280
einer Methode in Ihrer Komponente führen, die sich um die Behandlung dieses Ereignisses kümmert.

73
00:05:42,280 --> 00:05:45,310
Daher werden die Methoden, die von

74
00:05:45,310 --> 00:05:50,220
den Ereignissen aus Ihrem DOM aufgerufen werden, als Handler bezeichnet.

75
00:05:50,220 --> 00:05:55,670
Also, das Handle ist nichts anderes als, wie ich sagte, eine Methode, die auch

76
00:05:55,670 --> 00:06:01,039
in einigen Parametern innerhalb der Handlermethoden dort übergeben werden könnte.

77
00:06:02,790 --> 00:06:09,620
Später, wenn wir uns Formulare ansehen, werden wir eine bidirektionale Datenbindung sehen.

78
00:06:09,620 --> 00:06:16,190
Also alle drei, die wir bisher gesehen haben, der Fluss des Wertes von

79
00:06:16,190 --> 00:06:20,910
der Komponente zur Vorlage oder die Eigenschaft, die einem Wert zugewiesen wird, oder

80
00:06:20,910 --> 00:06:26,380
das Ereignis, das einem Handler zugewiesen wird, um das Ereignis zu behandeln.

81
00:06:26,380 --> 00:06:29,780
All dies sind, was wir als Einweg-Datenbindungen bezeichnen, weil

82
00:06:31,010 --> 00:06:33,240
sie nur in eine Richtung fließen.

83
00:06:33,240 --> 00:06:37,810
Sie können auch einen bidirektionalen Fluss haben, wo Sie ihn auch

84
00:06:37,810 --> 00:06:41,200
in der Syntax sehen können, was Sie mit eckigen Klammern angeben würden.

85
00:06:41,200 --> 00:06:44,590
Und dann darin mit Standardklammer eingeschlossen.

86
00:06:44,590 --> 00:06:47,772
Ein Inneres dort werden Sie etwas wie ein ngModel spezifizieren.

87
00:06:47,772 --> 00:06:52,575
Sie werden die Verwendung dieser sehen, wenn es später im nächsten Modul gebildet wird.

88
00:06:52,575 --> 00:06:55,215
Hier werden Sie also eine Eigenschaft zuweisen.

89
00:06:55,215 --> 00:06:58,675
In diesem Fall ist der Informationsfluss bidirektional.

90
00:06:58,675 --> 00:07:03,789
Jede Änderung in Ihrem DOM wird also wieder in Ihre Eigenschaft und

91
00:07:03,789 --> 00:07:05,029
die Komponente reflektiert.

92
00:07:05,029 --> 00:07:08,785
Jede Änderung in der Eigenschaft der Komponente wird auf das DOM zurückgespiegelt.

93
00:07:08,785 --> 00:07:12,700
Beachten Sie die spezifische Syntax, die wir für

94
00:07:12,700 --> 00:07:15,918
die Angabe des ngModel in diesem Beispiel hier verwenden.

95
00:07:15,918 --> 00:07:21,100
Wir verwenden eine eckige Klammer und innen, dass wir die Standardklammer dort verwenden.

96
00:07:22,390 --> 00:07:25,640
Lassen Sie mich nun zusammenfassen, was wir gerade über

97
00:07:25,640 --> 00:07:30,620
die Datenbindung in der vorherigen Folie in dieser Tabelle gelernt haben.

98
00:07:30,620 --> 00:07:36,890
In dieser Tabelle zeigen wir die verschiedenen Möglichkeiten, wie Datenbindung verwendet wird.

99
00:07:36,890 --> 00:07:41,610
Einseitige Datenbindung von der Datenquelle an das Ansichtsziel

100
00:07:41,610 --> 00:07:45,370
, also

101
00:07:45,370 --> 00:07:51,720
verwenden wir von der Komponente zum DOM einen doppelten geschweiften Ausdruck darin.

102
00:07:51,720 --> 00:07:55,970
Dies ist, was wir als Interpolation als Beispiel für die,

103
00:07:55,970 --> 00:08:01,080
wäre der Name des Gerichts, eingeschlossen innerhalb der doppelten Klammern, wie wir gesehen haben,

104
00:08:01,080 --> 00:08:06,030
in den Übungen verwendet, im vorherigen Modul.

105
00:08:06,030 --> 00:08:11,345
Dann haben wir, die zweite Art, wo Sie das Ziel

106
00:08:11,345 --> 00:08:17,385
in eine eckige Klammer einschließen und es dann einem Ausdruck auf der rechten Seite zuweisen.

107
00:08:17,385 --> 00:08:22,450
Diese Ausdrücke können JavaScript-Ausdrücke mit einigen Einschränkungen sein.

108
00:08:22,450 --> 00:08:25,600
Die Beispiele, die wir normalerweise sehen werden, wären

109
00:08:25,600 --> 00:08:30,960
die Verwendung einer Eigenschaft aus einer der Klassen dort.

110
00:08:30,960 --> 00:08:34,390
Also, das ist, was wir als Eigenschaft Attribut bezeichnet, und

111
00:08:34,390 --> 00:08:38,878
Beispiel, von dem Sie in der Übung sehen, die dieser Vorlesung folgt.

112
00:08:38,878 --> 00:08:44,333
Wo Sie die Verwendung einer Schale sehen würden, die in einer eckigen Klammer eingeschlossen ist und mit einem

113
00:08:44,333 --> 00:08:51,650
SelectedDish gleichgesetzt wird, was eine Variable ist, die innerhalb einer Komponente deklariert ist.

114
00:08:51,650 --> 00:08:56,770
Dies kann auch mit einem Bind-Target ausgedrückt werden,

115
00:08:56,770 --> 00:08:58,680
eine Möglichkeit, dasselbe auszudrücken.

116
00:08:58,680 --> 00:09:04,630
Also beide diese, ob Sie ein Ziel in eckige Klammern oder bind-target einschließen.

117
00:09:04,630 --> 00:09:07,550
So können Sie zum Beispiel Bind-Dish sehen.

118
00:09:07,550 --> 00:09:11,820
Wie auch immer Sie dies ausdrücken, beziehen sich beide auf dasselbe.

119
00:09:11,820 --> 00:09:17,528
Das angegebene Eigenschaftenattribut oder der angegebene Klassenstil.

120
00:09:17,528 --> 00:09:22,367
Nun wird der unidirektionale Informationsfluss vom Viewziel zur

121
00:09:22,367 --> 00:09:27,401
Datenquelle normalerweise mit dem Ziel ausgedrückt, das

122
00:09:27,401 --> 00:09:32,780
hier in Klammern eingeschlossen ist oder auch als on-target ausgedrückt werden kann.

123
00:09:32,780 --> 00:09:36,610
Und auf der rechten Seite wäre eine Aussage.

124
00:09:36,610 --> 00:09:41,523
Eine Anweisung könnte eine Art eines JavaScript-Ausdrucks

125
00:09:41,523 --> 00:09:46,532
sein, der normalerweise in der des Aufrufs einer Methode innerhalb einer Komponente liegt.

126
00:09:46,532 --> 00:09:51,668
Nun, Sie werden ein Beispiel in der Übung sehen, die folgt, wo

127
00:09:51,668 --> 00:09:57,611
Sie in die Klammer geklickt und onSelect zugewiesen hätten.

128
00:09:57,611 --> 00:10:02,700
Welches ist eine Methode, die innerhalb einer

129
00:10:02,700 --> 00:10:10,540
Komponentenklasse dort mit einer Parameterschale beschrieben wird, die dieser Methode dort geliefert wird.

130
00:10:10,540 --> 00:10:15,920
Die bidirektionale Datenbindung, wie wir sahen, wäre mit Squire und Klammern,

131
00:10:15,920 --> 00:10:21,320
Squire Klammern und Klammern, die mit einem Ausdruck gleichgesetzt wird.

132
00:10:21,320 --> 00:10:26,380
Wir werden eine bidirektionale Datenbindung als einen Satz mit Formularen ein wenig später sehen, wo

133
00:10:26,380 --> 00:10:31,843
Sie etwas wie ein ngModel verwenden werden, das in den eckigen

134
00:10:31,843 --> 00:10:35,647
Klammern und Klammern eingeschlossen ist, gleichgesetzt mit etwas wie dish.name.

135
00:10:35,647 --> 00:10:40,438
Das verbindet das Formularelement mit einer Eigenschaft

136
00:10:40,438 --> 00:10:44,640
eines JavaScript-Objekts, in unserer Komponente.

137
00:10:46,260 --> 00:10:50,240
Sie können dies auch als Bindon-Ziel ausdrücken.

138
00:10:50,240 --> 00:10:52,401
Das ist eine andere Art, dasselbe zu sagen.

139
00:10:52,401 --> 00:10:56,866
Nun, diese bidirektionale Datenbindung, die wir tun

140
00:10:56,866 --> 00:11:00,630
, wird manchmal als Banane in einer Box bezeichnet.

141
00:11:00,630 --> 00:11:04,630
Wenn Sie also die eckigen Klammern mit der Klammer darin betrachten,

142
00:11:04,630 --> 00:11:06,110
sieht es wie eine Banane in einer Box aus.

143
00:11:06,110 --> 00:11:11,550
Möglicherweise wird dies in einigen der Dokumentation oder

144
00:11:11,550 --> 00:11:14,580
in einigen Blogs verwendet, die Sie möglicherweise im Internet lesen.

145
00:11:15,970 --> 00:11:19,920
Die verbindlichen Ziele, die wir gesehen haben, erweitern weiter

146
00:11:19,920 --> 00:11:23,720
die verbindlichen Ziele, sind die Eigenschaften, die auf der linken Seite

147
00:11:23,720 --> 00:11:27,310
der verbindlichen Erklärung dieser datenbindenden Erklärung deklariert werden.

148
00:11:27,310 --> 00:11:33,280
Typischerweise in eckigen Klammern oder in Klammern oder beides eingeschlossen.

149
00:11:33,280 --> 00:11:40,850
Die rechte Seite des Bindungsausdrucks

150
00:11:40,850 --> 00:11:45,670
sind also ihre Bindungsquellen, die typischerweise wie die Eigenschaften eines JavaScript-Objekts oder

151
00:11:45,670 --> 00:11:51,930
einer Variablen oder eines Ausdrucks sind, den wir auf der rechten Seite definieren.

152
00:11:51,930 --> 00:11:58,970
Wenn Sie Zieleigenschaften definieren, die mit der Selektive einer Komponente verknüpft sind.

153
00:11:58,970 --> 00:12:03,140
Dies ist eine Möglichkeit, entweder Informationen in eine Komponente zu übergeben

154
00:12:03,140 --> 00:12:07,320
oder Informationen von einer Komponente an eine andere Komponente zurückzusenden.

155
00:12:07,320 --> 00:12:12,490
Dies erleichtert die Kommunikation zwischen den Komponenten.

156
00:12:12,490 --> 00:12:18,258
Sie würden also die Verwendung eines Dekorators wie @Input sehen, der mit

157
00:12:18,258 --> 00:12:24,442
einer Möglichkeit verbunden ist, Informationen von einer Komponente zu einer anderen Komponente zu senden.

158
00:12:24,442 --> 00:12:29,194
Wir werden ein Beispiel für diese Verwendung in der Übung sehen

159
00:12:29,194 --> 00:12:32,690
, die dieser Vorlesung folgt.

160
00:12:32,690 --> 00:12:37,600
In ähnlicher Weise können Sie den Output Dekorator verwenden, um ein Ereignis

161
00:12:37,600 --> 00:12:42,070
von einer Komponente anzugeben, die an eine andere Komponente zurückgegeben wird.

162
00:12:42,070 --> 00:12:49,472
Beide Verwendungen werden also effektiv für die Kommunikation zwischen Komponenten verwendet.

163
00:12:49,472 --> 00:12:52,759
( MUSIK)