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

2
00:00:04,711 --> 00:00:06,798
Если у вас есть статический сайт,

3
00:00:06,798 --> 00:00:11,735
, то у вас есть все данные, которые вам нужны для создания вашего сайта.

4
00:00:11,735 --> 00:00:17,790
И он будет создан один раз, и ваш сайт готов к работе.

5
00:00:17,790 --> 00:00:23,208
Но многие сайты в эти дни управляются данными из бэкэнда.

6
00:00:23,208 --> 00:00:27,721
Ваше веб-приложение будет извлекать данные с серверного сервера и

7
00:00:27,721 --> 00:00:32,667
затем использовать данные для динамической компоновки контента на вашем сайте, или

8
00:00:32,667 --> 00:00:35,474
даже обновлять контент на вашем сайте.

9
00:00:35,474 --> 00:00:40,090
Таким образом, для этого требуется, чтобы данные поступали из бэкэнда через

10
00:00:40,090 --> 00:00:43,410
ваше веб-приложение в DOM.

11
00:00:43,410 --> 00:00:49,161
И любое взаимодействие пользователя в DOM должно быть передано обратно в ваше веб-приложение.

12
00:00:49,161 --> 00:00:54,211
Таким образом, это требует связи между DOM и

13
00:00:54,211 --> 00:00:59,920
вашего компонента в угловой структуре, например.

14
00:00:59,920 --> 00:01:03,268
Давайте посмотрим, как это происходит в угловой структуре и

15
00:01:03,268 --> 00:01:04,880
с немного более подробным.

16
00:01:06,900 --> 00:01:11,420
То, что мы узнали до сих пор, так это то, как готовится компонент.

17
00:01:11,420 --> 00:01:17,129
Таким образом, мы увидели, что компонент состоит из двух основных частей: typescript

18
00:01:17,129 --> 00:01:24,380
файл, где определена архитектура компонента, и свойства.

19
00:01:24,380 --> 00:01:29,480
И методы, а затем у вас есть шаблон, который

20
00:01:29,480 --> 00:01:34,430
определяет, как содержание выкладывается, и добавляется в DOM.

21
00:01:34,430 --> 00:01:38,410
Таким образом, шаблон является тот, который будет поставляться компонентом

22
00:01:38,410 --> 00:01:41,640
занять часть вашей веб-страницы.

23
00:01:41,640 --> 00:01:45,870
Таким образом, шаблон формирует коммуникационную среду для вашего DOM.

24
00:01:45,870 --> 00:01:52,210
И этот шаблон требует, чтобы данные были получены от вашего компонента, чтобы

25
00:01:53,450 --> 00:02:00,040
рендеринг части контента на вашем шаблоне и

26
00:02:00,040 --> 00:02:04,105
соответственно в DOM вашей веб-страницы.

27
00:02:05,250 --> 00:02:11,662
Теперь, если у вас не было роскоши структуры, такой как Angular,

28
00:02:11,662 --> 00:02:16,442
, вы должны иметь дело со всеми подробностями о том, как

29
00:02:16,442 --> 00:02:21,586
потоки данных с сайта приложения на DOM.

30
00:02:21,586 --> 00:02:25,696
И как события взаимодействия с пользователем, вызванные в

31
00:02:25,696 --> 00:02:29,980
DOM будут отправлены обратно в ваше приложение.

32
00:02:29,980 --> 00:02:33,851
К счастью, с кадром работает как Angular,

33
00:02:33,851 --> 00:02:38,520
они поддерживают все эти поведения по своей сути.

34
00:02:38,520 --> 00:02:44,047
Теперь мы уже видели одно использование потока данных из свойства компонента

35
00:02:44,047 --> 00:02:48,504
к шаблону в предыдущих упражнениях.

36
00:02:48,504 --> 00:02:54,433
Где мы использовали двойные фигурные скобки, чтобы предоставить информацию о том, что

37
00:02:54,433 --> 00:03:02,050
из переменной в коде TypeScript вашего компонента, в ваш шаблон.

38
00:03:02,050 --> 00:03:03,830
Мы рассмотрим другие способы, и

39
00:03:03,830 --> 00:03:08,670
затем также в упражнении, которое следует, мы будем использовать это,

40
00:03:08,670 --> 00:03:14,370
, чтобы изменить угловое приложение, которое мы разрабатывали до сих пор.

41
00:03:15,570 --> 00:03:18,975
То, что мы говорили, до сих пор, является привязкой данных,

42
00:03:18,975 --> 00:03:23,972
механизм координации потока информации между шаблоном и

43
00:03:23,972 --> 00:03:27,468
компонента, или между DOM и компонентом.

44
00:03:27,468 --> 00:03:30,627
На уровне компонента это какое-то свойство или

45
00:03:30,627 --> 00:03:35,215
метод, который должен быть либо поставлен в шаблон, либо вызван из DOM.

46
00:03:35,215 --> 00:03:38,269
Или на стороне шаблона, это может быть некоторая информация

47
00:03:38,269 --> 00:03:41,890
, которая требуется шаблону для отображения в DOM или

48
00:03:41,890 --> 00:03:45,905
даже из DOM, захваченного и отправленного обратно вашему компоненту.

49
00:03:45,905 --> 00:03:50,886
Таким образом, все это требует, чтобы данные, поступающие из компонента в

50
00:03:50,886 --> 00:03:55,868
шаблон или события, собранные из DOM или

51
00:03:55,868 --> 00:04:01,735
, были отправлены обратно в ваш компонент, чтобы он действовал на эти события.

52
00:04:01,735 --> 00:04:07,967
Теперь это можно легко обработать в угловой структуре, используя четыре разных типа

53
00:04:07,967 --> 00:04:14,850
потока информации, которые мы обобщим в следующем слайде.

54
00:04:14,850 --> 00:04:19,150
Возвращаясь к взаимодействию между компонентом и шаблоном,

55
00:04:19,150 --> 00:04:22,820
мы уже видели первый вид взаимодействия между компонентом и

56
00:04:22,820 --> 00:04:27,800
шаблон, где значение свойства течет в шаблон.

57
00:04:27,800 --> 00:04:31,130
Таким образом, мы видели использование названия блюда,

58
00:04:31,130 --> 00:04:35,720
описание блюда, детали комментария блюда и так

59
00:04:35,720 --> 00:04:40,910
на поставку для того, чтобы отобразить информацию в вашем шаблоне.

60
00:04:40,910 --> 00:04:47,210
Так вот где мы использовали двойные скобки, чтобы заключить тот факт, что

61
00:04:47,210 --> 00:04:53,030
значение из вашего компонента используется в вашем шаблоне.

62
00:04:53,030 --> 00:04:58,160
Другой вид потока информации, который вы увидите, - это где

63
00:04:58,160 --> 00:05:04,930
вы указываете какое-то свойство, связанное с тегом в квадратных скобках.

64
00:05:04,930 --> 00:05:11,670
А затем присвойте ему значение из одного из свойств в вашем компоненте.

65
00:05:12,790 --> 00:05:17,010
Такой подход мы увидим в упражнении, которое следует

66
00:05:17,010 --> 00:05:19,210
сразу после этой лекции.

67
00:05:19,210 --> 00:05:22,160
Так что здесь мы бы указали что-то в квадратных скобках.

68
00:05:22,160 --> 00:05:23,100
Так что следите за

69
00:05:23,100 --> 00:05:28,880
пример этого в упражнении, где я расскажу больше об этом.

70
00:05:28,880 --> 00:05:32,640
Аналогично, если у вас есть событие, сгенерированное рядом с DOM,

71
00:05:32,640 --> 00:05:36,840
это событие может привести к вызову обработчика или

72
00:05:36,840 --> 00:05:42,280
метода В вашем компоненте, который будет заботиться о обработке этого события.

73
00:05:42,280 --> 00:05:45,310
Таким образом, методы, которые будут вызываться

74
00:05:45,310 --> 00:05:50,220
, события из вашего DOM называются обработчиками.

75
00:05:50,220 --> 00:05:55,670
Итак, ручка не что иное, как, как я сказал, метод, который может также

76
00:05:55,670 --> 00:06:01,039
передается в некотором параметре внутри методов обработчика.

77
00:06:02,790 --> 00:06:09,620
Позже, когда мы посмотрим на формы, мы увидим двустороннюю привязку данных.

78
00:06:09,620 --> 00:06:16,190
Таким образом, все три, что мы видели до сих пор, поток значения от

79
00:06:16,190 --> 00:06:20,910
компонента к шаблону или свойство присваивается значению или

80
00:06:20,910 --> 00:06:26,380
событие назначается обработчику для обработки события.

81
00:06:26,380 --> 00:06:29,780
Все это то, что мы называем односторонними привязками данных, потому что

82
00:06:31,010 --> 00:06:33,240
они протекают только в одном направлении.

83
00:06:33,240 --> 00:06:37,810
Вы также можете иметь двунаправленный поток, где вы также можете увидеть его

84
00:06:37,810 --> 00:06:41,200
в синтаксисе, который вы указали бы в квадратных скобках.

85
00:06:41,200 --> 00:06:44,590
И затем заключен внутри, что со стандартной скобкой.

86
00:06:44,590 --> 00:06:47,772
Внутри вы будете указать что-то вроде ngModel.

87
00:06:47,772 --> 00:06:52,575
Вы увидите использование этого, когда он будет сформирован позже в следующем модуле.

88
00:06:52,575 --> 00:06:55,215
Так вот, где вы назначите для этого свойство.

89
00:06:55,215 --> 00:06:58,675
Таким образом, в данном случае информационный поток является двунаправленным.

90
00:06:58,675 --> 00:07:03,789
Таким образом, любое изменение в вашем DOM будет отражаться обратно в вашем имуществе и

91
00:07:03,789 --> 00:07:05,029
компонент.

92
00:07:05,029 --> 00:07:08,785
Любое изменение свойства компонента будет отражаться обратно в DOM.

93
00:07:08,785 --> 00:07:12,700
Обратите внимание на конкретный синтаксис, который мы используем для

94
00:07:12,700 --> 00:07:15,918
, указав ngModel в этом примере.

95
00:07:15,918 --> 00:07:21,100
Мы используем квадратную скобку и внутри которой мы используем стандартную скобку там.

96
00:07:22,390 --> 00:07:25,640
Теперь позвольте мне резюмировать то, что мы только что узнали о

97
00:07:25,640 --> 00:07:30,620
привязке данных в предыдущем слайде в этой таблице.

98
00:07:30,620 --> 00:07:36,890
Таким образом, в этой таблице мы показываем различные способы использования привязки данных.

99
00:07:36,890 --> 00:07:41,610
Односторонняя привязка данных из источника данных к цели представления, поэтому

100
00:07:41,610 --> 00:07:45,370
из компонента к DOM,

101
00:07:45,370 --> 00:07:51,720
мы используем выражение двойной скобки внутри.

102
00:07:51,720 --> 00:07:55,970
Это то, что мы называем интерполяцией в качестве примера,

103
00:07:55,970 --> 00:08:01,080
будет название блюда, заключенное внутри двойных скобок, как мы видели,

104
00:08:01,080 --> 00:08:06,030
используется в упражнениях, в предыдущем модуле.

105
00:08:06,030 --> 00:08:11,345
Тогда у нас есть, второй вид, где вы заключаете цель

106
00:08:11,345 --> 00:08:17,385
в квадратную скобку, а затем присваиваете его выражению на правой стороне.

107
00:08:17,385 --> 00:08:22,450
Эти выражения могут быть выражениями JavaScript с некоторыми ограничениями.

108
00:08:22,450 --> 00:08:25,600
Примеры, которые мы обычно увидим, будут

109
00:08:25,600 --> 00:08:30,960
, используя свойство одного из классов там.

110
00:08:30,960 --> 00:08:34,390
Итак, это то, что мы называли атрибутом свойства, и

111
00:08:34,390 --> 00:08:38,878
пример которого вы увидите в упражнении, которое следует за этой лекцией.

112
00:08:38,878 --> 00:08:44,333
Где вы увидите использование блюдо, заключенное в квадратную скобку,

113
00:08:44,333 --> 00:08:51,650
приравнивается к selectedDish, которая является переменной, объявленной внутри компонента.

114
00:08:51,650 --> 00:08:56,770
Это также может быть выражено с помощью привязки цели,

115
00:08:56,770 --> 00:08:58,680
способ выражения того же самого.

116
00:08:58,680 --> 00:09:04,630
Таким образом, оба эти ли вы заключаете цель в квадратных скобках или привязку цели.

117
00:09:04,630 --> 00:09:07,550
Так, например, можно увидеть связующие блюда.

118
00:09:07,550 --> 00:09:11,820
Таким образом, каким бы вы ни выражали это, оба ссылаются на одно и то же.

119
00:09:11,820 --> 00:09:17,528
Таким образом, указывается атрибут свойства или указывается стиль класса.

120
00:09:17,528 --> 00:09:22,367
Теперь односторонний поток информации от цели представления до

121
00:09:22,367 --> 00:09:27,401
источника данных обычно выражается с целью, заключенной

122
00:09:27,401 --> 00:09:32,780
внутри круглых скобок, или может также быть выражен как on-target.

123
00:09:32,780 --> 00:09:36,610
И с правой стороны было бы заявление.

124
00:09:36,610 --> 00:09:41,523
Инструкция может быть своего рода выражением JavaScript, обычно

125
00:09:41,523 --> 00:09:46,532
будет в вызове метода внутри компонента.

126
00:09:46,532 --> 00:09:51,668
Ну вы увидите пример в упражнении, которое следует за которым

127
00:09:51,668 --> 00:09:57,611
вы бы щелкнули внутри скобок и назначили onSelect.

128
00:09:57,611 --> 00:10:02,700
Какой метод описан внутри класса компонента

129
00:10:02,700 --> 00:10:10,540
там с параметром блюдо, поставляемым этому методу.

130
00:10:10,540 --> 00:10:15,920
Двусторонняя привязка данных, как мы видели, будет с сквайром и круглыми скобками,

131
00:10:15,920 --> 00:10:21,320
squire скобками и скобками, которые приравниваются к выражению.

132
00:10:21,320 --> 00:10:26,380
Мы увидим двустороннюю привязку данных как набор с формами немного позже, где

133
00:10:26,380 --> 00:10:31,843
вы будете использовать что-то вроде ngModel, заключенный в квадратные скобки и

134
00:10:31,843 --> 00:10:35,647
круглые скобки, приравненные к чем-то вроде dish.name.

135
00:10:35,647 --> 00:10:40,438
Который связывает элемент формы с свойством

136
00:10:40,438 --> 00:10:44,640
объекта JavaScript, в нашем компоненте.

137
00:10:46,260 --> 00:10:50,240
Вы также можете выразить это как связующие цели.

138
00:10:50,240 --> 00:10:52,401
Это еще один способ сказать то же самое.

139
00:10:52,401 --> 00:10:56,866
Теперь, это двустороннее связывание данных, которое мы делаем, иногда

140
00:10:56,866 --> 00:11:00,630
jocully упоминается как банан в коробке.

141
00:11:00,630 --> 00:11:04,630
Так что если вы посмотрите на квадратные скобки с круглыми скобками внутри них,

142
00:11:04,630 --> 00:11:06,110
это выглядит как банан в коробке.

143
00:11:06,110 --> 00:11:11,550
Таким образом, вы можете увидеть, что это используется в некоторых документах или

144
00:11:11,550 --> 00:11:14,580
в некоторых блогах, которые вы можете прочитать в Интернете.

145
00:11:15,970 --> 00:11:19,920
Расширяясь далее на связывающие цели, которые мы видели,

146
00:11:19,920 --> 00:11:23,720
обязательные цели являются свойствами, которые объявлены на левой стороне

147
00:11:23,720 --> 00:11:27,310
обязательной декларации этой обязательной привязки данных декларации.

148
00:11:27,310 --> 00:11:33,280
Как правило, заключены в квадратные скобки или внутри круглых скобок или оба.

149
00:11:33,280 --> 00:11:40,850
Таким образом, правая сторона выражения привязки - это их источники привязки,

150
00:11:40,850 --> 00:11:45,670
, которые обычно похожи на свойства объекта JavaScript, или

151
00:11:45,670 --> 00:11:51,930
переменная, или выражение, которое мы определяем с правой стороны.

152
00:11:51,930 --> 00:11:58,970
При определении целевых свойств, связанных с выборочным компонентом.

153
00:11:58,970 --> 00:12:03,140
Это один из способов передачи информации в компонент

154
00:12:03,140 --> 00:12:07,320
или отправки информации из одного компонента в другой компонент.

155
00:12:07,320 --> 00:12:12,490
Таким образом, это облегчает связь между компонентами.

156
00:12:12,490 --> 00:12:18,258
Таким образом, вы увидите использование декоратора, такого как @Input, связанного с

157
00:12:18,258 --> 00:12:24,442
, способ отправки информации из одного компонента в другой компонент.

158
00:12:24,442 --> 00:12:29,194
Мы увидим пример этого использования в упражнении

159
00:12:29,194 --> 00:12:32,690
, которое следует за этой лекцией здесь.

160
00:12:32,690 --> 00:12:37,600
Аналогично, вы можете использовать декоратор вывода для указания события

161
00:12:37,600 --> 00:12:42,070
из одного компонента, который передается обратно другому компоненту.

162
00:12:42,070 --> 00:12:49,472
Таким образом, оба эти использования эффективно используются для связи между компонентами.

163
00:12:49,472 --> 00:12:52,759
[МУЗЫКА]