1
00:00:00,000 --> 00:00:07,225
Теперь, когда мы изучили привязку данных,

2
00:00:07,225 --> 00:00:10,275
давайте использовать их для

3
00:00:10,275 --> 00:00:14,715
работы над приложением Angular, которое мы использовали до сих пор.

4
00:00:14,715 --> 00:00:17,504
В предыдущей версии углового приложения

5
00:00:17,504 --> 00:00:20,190
у нас было меню визуализируется,

6
00:00:20,190 --> 00:00:24,655
, а затем у нас было конкретное блюдо, показываемое внизу.

7
00:00:24,655 --> 00:00:28,770
Теперь мы хотели бы, чтобы пользователь мог нажать

8
00:00:28,770 --> 00:00:32,990
на любом из пунктов меню, а затем детали, которые будут показаны пользователю.

9
00:00:32,990 --> 00:00:37,325
Это где использование привязки данных поможет нам

10
00:00:37,325 --> 00:00:43,430
реализовать наше приложение, чтобы включить этот вид функции.

11
00:00:43,430 --> 00:00:48,470
Перейдя к текущему состоянию нашего приложения в браузере,

12
00:00:48,470 --> 00:00:52,040
теперь мы можем видеть, что у нас есть наше меню и внизу мы

13
00:00:52,040 --> 00:00:56,370
есть детали одного конкретного блюда, показываемого там.

14
00:00:56,370 --> 00:01:01,625
Теперь, это хорошо и хорошо для начала, но в идеале,

15
00:01:01,625 --> 00:01:06,350
то, что мы хотели бы иметь, это то, что если пользователь нажимает на любой из этих блюд,

16
00:01:06,350 --> 00:01:12,585
мы хотим иметь возможность показать детали блюда в нижней части меню здесь.

17
00:01:12,585 --> 00:01:17,165
Итак, мы хотели бы, чтобы детали блюда были изменены

18
00:01:17,165 --> 00:01:22,250
, исходя из того, какое конкретное блюдо мы нажимаем в любой момент.

19
00:01:22,250 --> 00:01:24,100
Итак, как нам этого добиться?

20
00:01:24,100 --> 00:01:28,355
Итак, вот где использование привязки данных приходит нам на помощь.

21
00:01:28,355 --> 00:01:31,735
Перейдя в наше приложение,

22
00:01:31,735 --> 00:01:35,750
первое, что я собираюсь сделать, это в общей папке,

23
00:01:35,750 --> 00:01:39,800
теперь вы понимаете, что информация о блюде используется

24
00:01:39,800 --> 00:01:45,090
как в компоненте меню, так и в компоненте детали блюда.

25
00:01:45,090 --> 00:01:49,100
Теперь, когда у вас есть такая информация,

26
00:01:49,100 --> 00:01:53,120
было бы более удобно иметь централизованное место

27
00:01:53,120 --> 00:01:57,170
, из которого эта информация передается обоим компонентам.

28
00:01:57,170 --> 00:01:58,880
Поэтому, чтобы помочь мне сделать это,

29
00:01:58,880 --> 00:02:03,470
то, что я собираюсь сделать, это перейти в папку общего доступа, а затем создать новый файл,

30
00:02:03,470 --> 00:02:09,150
, а затем я назовем этот файл как dishes.ts.

31
00:02:09,150 --> 00:02:11,540
Внутри этого файла dishes.ts,

32
00:02:11,540 --> 00:02:16,840
Я собираюсь создать константу, которая поставляет детали блюд.

33
00:02:16,840 --> 00:02:17,980
Так что,

34
00:02:17,980 --> 00:02:27,380
я бы сначала импортирую блюдо,

35
00:02:27,380 --> 00:02:34,400
из класса блюд

36
00:02:34,400 --> 00:02:36,760
, который я уже определил ранее.

37
00:02:36,760 --> 00:02:40,625
Итак, теперь я могу определить константу

38
00:02:40,625 --> 00:02:48,230
, называемую посудой типа массива тарелок,

39
00:02:48,230 --> 00:02:53,590
и тогда я собираюсь хранить детали всех моих блюд.

40
00:02:53,590 --> 00:02:56,495
Теперь, в более ранней версии приложения,

41
00:02:56,495 --> 00:03:00,500
мы видели использование блюд и мы увидели

42
00:03:00,500 --> 00:03:04,610
массив объектов JavaScript, который содержит детали блюд.

43
00:03:04,610 --> 00:03:09,830
Теперь мы собираемся переместить весь этот контент и с обновленной версией его.

44
00:03:09,830 --> 00:03:12,485
Итак, обновленная версия блюд

45
00:03:12,485 --> 00:03:16,520
массив объектов JavaScript дается вам в инструкции,

46
00:03:16,520 --> 00:03:18,065
так просто пойти и скопировать

47
00:03:18,065 --> 00:03:22,760
весь массив объектов JavaScript оттуда, а затем мы вставим его на место здесь.

48
00:03:22,760 --> 00:03:25,625
Таким образом, это становится центральным местом, из которого

49
00:03:25,625 --> 00:03:30,215
информация о блюдах предоставляется вашему приложению.

50
00:03:30,215 --> 00:03:34,610
Я теперь вырезать и вставить детали

51
00:03:34,610 --> 00:03:39,770
блюдо, которые приведены в инструкции упражнения на место здесь,

52
00:03:39,770 --> 00:03:43,640
и поэтому у меня есть четыре блюда, вставленные здесь один,

53
00:03:43,640 --> 00:03:46,030
два три, и четыре блюда, вставленные здесь,

54
00:03:46,030 --> 00:03:48,710
и каждый из этих блюд содержит, конечно же,

55
00:03:48,710 --> 00:03:52,560
детали конкретного блюда и также комментарии к блюду.

56
00:03:52,560 --> 00:03:55,610
Теперь таким образом отображение информации в

57
00:03:55,610 --> 00:04:02,360
шаблон детали блюда становится простым для любого из этих выбранных блюд.

58
00:04:02,360 --> 00:04:09,130
Теперь, если вы откатитесь, вы увидите, что здесь есть красные линии.

59
00:04:09,130 --> 00:04:16,700
Причина этих красных линий заключается в том, что, когда вы посмотрите на объект блюда здесь,

60
00:04:16,700 --> 00:04:23,210
вы увидите, что в объекте блюда у нас нет свойства, называемого комментариями.

61
00:04:23,210 --> 00:04:26,060
Итак, нам нужно создать новое свойство под названием

62
00:04:26,060 --> 00:04:30,480
comments, чтобы добавить в это блюдо здесь. Итак, как нам это сделать?

63
00:04:30,480 --> 00:04:35,060
Так что, чтобы сделать это, мы будем говорить комментарии и

64
00:04:35,060 --> 00:04:41,275
, то я бы сказал комментарий массив здесь.

65
00:04:41,275 --> 00:04:47,690
Теперь сразу же вы понимаете, что для нас нет массива комментариев,

66
00:04:47,690 --> 00:04:50,495
, поэтому нам нужно создать этот массив комментариев.

67
00:04:50,495 --> 00:04:54,605
Итак, что я собираюсь сделать, это создать еще один класс JavaScript

68
00:04:54,605 --> 00:04:59,090
, который содержит детали комментария там.

69
00:04:59,090 --> 00:05:17,340
Итак, чтобы сделать это, сначала я импортирую комментарий из

70
00:05:17,340 --> 00:05:20,750
класса комментариев здесь.

71
00:05:20,750 --> 00:05:25,435
Теперь, конечно, красная линия сразу говорит мне, что у меня нет класса комментариев.

72
00:05:25,435 --> 00:05:27,375
Итак, как добавить класс комментариев?

73
00:05:27,375 --> 00:05:29,500
Итак, идя в общую папку,

74
00:05:29,500 --> 00:05:37,940
мы создадим новый файл с именем comment.ts и внутри этого comment.ts,

75
00:05:37,940 --> 00:05:48,250
мы определим класс под названием comment здесь.

76
00:05:50,300 --> 00:05:55,695
Теперь нам нужно определить определенные свойства для этого класса комментариев.

77
00:05:55,695 --> 00:05:57,605
Итак, каковы свойства, которые у нас есть?

78
00:05:57,605 --> 00:06:00,890
Давайте рассмотрим наш файл dishes.ts

79
00:06:00,890 --> 00:06:05,310
, а затем посмотрим, какие свойства для каждого комментария.

80
00:06:06,170 --> 00:06:09,085
Перейдя в файл dishes.ts,

81
00:06:09,085 --> 00:06:11,555
вы видите, что комментарии содержат

82
00:06:11,555 --> 00:06:15,470
одно свойство называется рейтингом, который кажется числом,

83
00:06:15,470 --> 00:06:18,110
, то у вас есть комментарий, который является строкой и

84
00:06:18,110 --> 00:06:21,490
автор, который является строкой и датой, которая также является строкой.

85
00:06:21,490 --> 00:06:26,690
Итак, нам нужно определить четыре свойства для моего класса комментариев здесь.

86
00:06:26,690 --> 00:06:30,075
Итак, возвращаясь к классу комментариев,

87
00:06:30,075 --> 00:06:34,770
я бы определил рейтинг как число.

88
00:06:34,770 --> 00:06:37,410
Итак, в типе скрипта,

89
00:06:37,410 --> 00:06:47,575
все здесь есть число, то у нас был комментарий, который является автором строки,

90
00:06:47,575 --> 00:06:49,480
который также является строкой,

91
00:06:49,480 --> 00:06:56,500
а затем дата, которая также является строкой здесь.

92
00:06:56,500 --> 00:07:01,130
Итак, это четыре свойства, которые у нас есть здесь.

93
00:07:01,130 --> 00:07:09,620
Теперь, очевидно, мы видели, как мы используем строку даты в предыдущем упражнении

94
00:07:09,620 --> 00:07:13,040
и в задании, как мы использовали

95
00:07:13,040 --> 00:07:17,410
строку даты, чтобы показать дату для комментария там.

96
00:07:17,410 --> 00:07:19,755
Теперь, если вам интересно,

97
00:07:19,755 --> 00:07:22,540
, что на самом деле содержит эта строка даты?

98
00:07:22,540 --> 00:07:28,260
Идя сюда, вы увидите, что эта строка даты имеет определенный формат.

99
00:07:28,260 --> 00:07:32,165
Итак, это стандартный формат для хранения даты здесь.

100
00:07:32,165 --> 00:07:38,230
Этот формат даты является способом определения формата даты ISO OSI.

101
00:07:38,230 --> 00:07:39,775
Итак, мы просто собираемся использовать это,

102
00:07:39,775 --> 00:07:42,670
, так что это стандартизированный формат, который используется также в

103
00:07:42,670 --> 00:07:48,430
многих языках программирования, который позволяет хранить данные в виде строки здесь,

104
00:07:48,430 --> 00:07:51,500
поэтому я просто собираюсь использовать его как таковой здесь.

105
00:07:51,500 --> 00:07:55,405
После внесения изменений в файл

106
00:07:55,405 --> 00:08:02,230
dish.ts, как это здесь, а затем также добавления в класс комментариев здесь,

107
00:08:02,230 --> 00:08:08,420
теперь мы видим, что файл dishes.ts больше не имеет этих красных строк, потому что

108
00:08:08,420 --> 00:08:18,325
комментарий был добавлен в качестве массива объектов в мой класс блюда здесь.

109
00:08:18,325 --> 00:08:22,470
Итак, до сих пор это отлично работает.

110
00:08:22,470 --> 00:08:24,530
Теперь, как нам это использовать?

111
00:08:24,530 --> 00:08:25,935
Теперь, чтобы использовать это,

112
00:08:25,935 --> 00:08:28,755
мы перейдем к меню component.ts,

113
00:08:28,755 --> 00:08:32,050
, а затем здесь мы имеем эту константу, определенную здесь.

114
00:08:32,050 --> 00:08:34,760
Теперь, это не правильный способ сделать это

115
00:08:34,760 --> 00:08:38,845
позже вы увидите, что я использую сервис для всего этого.

116
00:08:38,845 --> 00:08:49,075
Итак, позвольте мне полностью вырезать эту константу отсюда и вместо того, чтобы использовать эту константу,

117
00:08:49,075 --> 00:08:54,880
я собираюсь теперь импортировать блюда

118
00:08:54,880 --> 00:09:01,600
из общей папки

119
00:09:01,600 --> 00:09:07,225
здесь, общие блюда здесь.

120
00:09:07,225 --> 00:09:12,875
Итак, обратите внимание, что эта папка с блюдами экспортирует здесь постоянную посуду.

121
00:09:12,875 --> 00:09:17,250
Итак, это причина, по которой мы можем использовать его.

122
00:09:17,250 --> 00:09:20,080
Так что возвращаясь к блюдам здесь,

123
00:09:20,080 --> 00:09:22,600
Мне нужно экспортировать это отсюда,

124
00:09:22,600 --> 00:09:25,500
, так что я бы сказал экспорт.

125
00:09:25,500 --> 00:09:28,285
Постоянная. Итак, когда я это делаю,

126
00:09:28,285 --> 00:09:33,985
тогда в моем компоненте меню я вижу, что мои блюда могут быть импортированы сюда правильно.

127
00:09:33,985 --> 00:09:40,150
Тогда остальная часть кода здесь будет работать отлично без каких-либо изменений.

128
00:09:40,500 --> 00:09:46,190
Вы увидите, что если вы сохраните значения сейчас

129
00:09:46,190 --> 00:09:51,190
, а затем посмотрите на свое веб-приложение в браузере,

130
00:09:51,190 --> 00:09:55,655
он будет отображаться просто отлично даже после этих изменений.

131
00:09:55,655 --> 00:10:00,110
После сохранения всех изменений, которые вы сделали до сих пор во всех файлах,

132
00:10:00,110 --> 00:10:01,810
если вы идете и посмотрите на свою веб-страницу,

133
00:10:01,810 --> 00:10:05,360
ваша веб-страница отображается так же, как и раньше.

134
00:10:05,360 --> 00:10:09,025
Теперь вторая часть проблемы.

135
00:10:09,025 --> 00:10:11,390
Мы хотим иметь возможность общаться.

136
00:10:11,390 --> 00:10:15,640
Когда мы нажимаем на любой из этих пунктов меню,

137
00:10:15,640 --> 00:10:18,415
мы хотим иметь возможность сообщить эту информацию, чтобы

138
00:10:18,415 --> 00:10:21,640
соответствующее блюдо будет отображаться здесь.

139
00:10:21,640 --> 00:10:23,620
Итак, вот где мы собираемся воспользоваться помощью

140
00:10:23,620 --> 00:10:27,100
привязки данных, которые мы узнали до сих пор.

141
00:10:27,100 --> 00:10:33,505
Возвращаясь к файлу шаблона компонентов меню,

142
00:10:33,505 --> 00:10:36,600
то, что мы собираемся сделать, это то, что для

143
00:10:36,600 --> 00:10:41,675
это «app-dishdetail», что вы включаете внизу здесь,

144
00:10:41,675 --> 00:10:48,570
добавить в шаблон компонентов блюда детали к шаблону компонентов меню,

145
00:10:48,570 --> 00:10:53,440
мы собираемся добавить в свойство называется Блюдо.

146
00:10:53,440 --> 00:10:59,520
Тогда мы назначим это «selectedDish».

147
00:10:59,520 --> 00:11:03,550
Вы помните, что выбранное блюдо является переменной, которую мы определили

148
00:11:03,550 --> 00:11:08,385
в нашем меню компонентов TypeScript файла здесь.

149
00:11:08,385 --> 00:11:12,020
Таким образом, это значение выбранного блюда будет

150
00:11:12,020 --> 00:11:15,905
передаваться через это свойство блюдо здесь.

151
00:11:15,905 --> 00:11:20,860
Теперь мы увидим, как компонент детали блюда может получить эту информацию

152
00:11:20,860 --> 00:11:25,670
, а затем использовать ее хорошо на следующем шаге в упражнении.

153
00:11:25,670 --> 00:11:27,655
Теперь, пока мы здесь,

154
00:11:27,655 --> 00:11:33,345
мы также исправим другую проблему, с которой нам нужно разобраться.

155
00:11:33,345 --> 00:11:40,155
То есть, когда щелкнут любой из пунктов меню,

156
00:11:40,155 --> 00:11:49,475
, то он будет генерировать событие click, и мы хотим, чтобы информация была доставлена в наш файл TypeScript компонента меню.

157
00:11:49,475 --> 00:11:56,960
Итак, чтобы сделать это, мы перейдем в списки сетки меню, которые мы определили здесь.

158
00:11:56,960 --> 00:11:59,395
Для этой сетки здесь

159
00:11:59,395 --> 00:12:04,945
то, что я собираюсь сделать, это определить событие click здесь.

160
00:12:04,945 --> 00:12:06,910
Итак, для события click

161
00:12:06,910 --> 00:12:11,870
то, что я собираюсь сделать, я собираюсь вызвать метод

162
00:12:11,870 --> 00:12:19,005
select, который я определяю внутри моего файла component.ts меню.

163
00:12:19,005 --> 00:12:20,880
Для этого метода onSelect

164
00:12:20,880 --> 00:12:25,975
я собираюсь поставить блюдо в качестве параметра здесь.

165
00:12:25,975 --> 00:12:27,315
Что это за блюдо?

166
00:12:27,315 --> 00:12:30,670
Это блюдо именно это блюдо, которое вы выбрали в

167
00:12:30,670 --> 00:12:35,785
это «пусть блюдо блюд» в синтаксисе ngFor здесь.

168
00:12:35,785 --> 00:12:38,290
Итак, это конкретное блюдо

169
00:12:38,290 --> 00:12:41,390
из массива блюд, которые вы выбрали здесь,

170
00:12:41,390 --> 00:12:45,980
будет передан в качестве параметра для этого метода onSelect,

171
00:12:45,980 --> 00:12:50,555
, что мы собираемся реализовать в нашем файле component.ts меню.

172
00:12:50,555 --> 00:12:52,465
Итак, теперь, когда мы это сделали,

173
00:12:52,465 --> 00:12:56,175
так что это обработчик, который должен быть реализован.

174
00:12:56,175 --> 00:12:59,960
Давайте перейдем к файлу компонента меню, а затем исправим

175
00:12:59,960 --> 00:13:04,195
этот файл, чтобы реализовать этот обработчик там.

176
00:13:04,195 --> 00:13:08,490
Итак, когда вы делаете щелчок по любому из пунктов меню,

177
00:13:08,490 --> 00:13:10,695
тогда будет вызван соответствующий дескриптор и

178
00:13:10,695 --> 00:13:15,605
информация о конкретном блюде будет передана в качестве параметра здесь.

179
00:13:15,605 --> 00:13:19,790
Перейдя в файл menu component.ts, теперь

180
00:13:19,790 --> 00:13:25,545
выбранному блюду будет присвоено значение, основанное на том, какое блюдо я выбираю.

181
00:13:25,545 --> 00:13:29,600
Итак, я собираюсь удалить эту часть, а затем прямо ниже здесь,

182
00:13:29,600 --> 00:13:34,660
я собираюсь реализовать метод onSelect здесь.

183
00:13:34,660 --> 00:13:37,715
Итак, для метода onSelect

184
00:13:37,715 --> 00:13:45,525
это получит параметр, который является параметром блюдо.

185
00:13:45,525 --> 00:13:47,820
Когда этот параметр блюда приходит,

186
00:13:47,820 --> 00:13:55,705
я собираюсь назначить этот selectedDish равным блюду,

187
00:13:55,705 --> 00:14:02,420
параметр, который пришел в качестве значения для метода onSelect здесь.

188
00:14:02,420 --> 00:14:03,895
Итак, вот оно.

189
00:14:03,895 --> 00:14:08,410
Итак, когда вы нажимаете на любой из этих пунктов в меню,

190
00:14:08,410 --> 00:14:10,780
любой из блюд в меню,

191
00:14:10,780 --> 00:14:15,090
, что информация о блюде будет передана через это, а затем

192
00:14:15,090 --> 00:14:20,670
выбранное блюдо будет назначено этому объекту блюда здесь.

193
00:14:20,670 --> 00:14:25,415
Теперь у нас есть, как информация поступает от DOM.

194
00:14:25,415 --> 00:14:33,875
Конкретная клик приведет к тому, что информация о блюде будет доступна нам, и выбранному блюду будет присвоено это значение.

195
00:14:33,875 --> 00:14:38,755
Теперь, возвращаясь к HTML файлу компонента меню,

196
00:14:38,755 --> 00:14:45,240
мы видим, что мы уже присвоили это свойство блюда selectedDish.

197
00:14:45,240 --> 00:14:48,730
Таким образом, это выбранное значение блюда передается

198
00:14:48,730 --> 00:14:53,980
через это свойство блюда в это приложение dishdetail здесь.

199
00:14:53,980 --> 00:14:57,990
Теперь, как компонент детали моего блюда получает эту информацию?

200
00:14:57,990 --> 00:15:02,225
Для этого мы собираемся перейти к компоненту детали блюда и исправить это.

201
00:15:02,225 --> 00:15:05,185
Перейдя к компоненту детали блюда,

202
00:15:05,185 --> 00:15:08,395
первое, что я собираюсь сделать, это удалить

203
00:15:08,395 --> 00:15:13,370
эту константу блюда из моего компонента детали блюда.

204
00:15:13,370 --> 00:15:14,985
Мне это больше не нужно.

205
00:15:14,985 --> 00:15:18,490
Теперь, когда свойство привязывается,

206
00:15:18,490 --> 00:15:22,715
, как то, что мы видели в HTML-файле компонента меню,

207
00:15:22,715 --> 00:15:25,900
затем в моем файле подробностей блюдо,

208
00:15:25,900 --> 00:15:32,035
я могу использовать другой модуль под названием Input Module.

209
00:15:32,035 --> 00:15:35,505
Тогда, для этого блюда,

210
00:15:35,505 --> 00:15:39,555
я собираюсь просто объявить, что как DISH.

211
00:15:39,555 --> 00:15:45,095
Теперь этот модуль ввода позволяет мне объявить декоратор

212
00:15:45,095 --> 00:15:50,905
для этой переменной блюда, которую я определил здесь,

213
00:15:50,905 --> 00:15:57,800
, как это, при входе с скобками здесь к этому блюду здесь.

214
00:15:57,800 --> 00:16:01,025
Тогда, также, мне нужно импортировать

215
00:16:01,025 --> 00:16:10,010
класс блюд

216
00:16:10,010 --> 00:16:18,975
из общего блюда здесь.

217
00:16:18,975 --> 00:16:24,610
Итак, с этим, так что случилось, что я использую модуль ввода.

218
00:16:24,610 --> 00:16:30,655
Таким образом, это способ подачи информации в компонент из другого компонента.

219
00:16:30,655 --> 00:16:33,650
Вы привязываете свойство в шаблоне

220
00:16:33,650 --> 00:16:37,460
другой компонент, как мы видели в файле menu component.html,

221
00:16:37,460 --> 00:16:41,550
, а затем, что будет доступно в качестве входных данных для этого компонента,

222
00:16:41,550 --> 00:16:47,070
объявляя переменную, а затем вызывая входной декоратор для этого.

223
00:16:47,070 --> 00:16:51,400
Теперь, с этим, давайте сохраним изменения во всех файлах, которые мы сделали

224
00:16:51,400 --> 00:16:56,990
, а затем посмотрим на угловую репликацию.

225
00:16:56,990 --> 00:17:00,140
Перейдя в наш браузер,

226
00:17:00,140 --> 00:17:02,260
мы видим, что в этой угловой репликации,

227
00:17:02,260 --> 00:17:04,000
ничего не отображается здесь.

228
00:17:04,000 --> 00:17:07,470
Потому что прямо сейчас, выбранное блюдо

229
00:17:07,470 --> 00:17:11,120
мы не выбрали ни одного из блюд, так что и выбранное блюдо

230
00:17:11,120 --> 00:17:14,985
является пустой объект там.

231
00:17:14,985 --> 00:17:23,050
Итак, мы используем ngIf в шаблоне для детали блюда.

232
00:17:23,050 --> 00:17:27,765
Итак, быстро взгляните на шаблон детали блюда,

233
00:17:27,765 --> 00:17:31,810
вы реализовали это как часть своего задания.

234
00:17:31,810 --> 00:17:38,315
Итак, вы должны были использовать ngIf с блюдом как для кода,

235
00:17:38,315 --> 00:17:41,400
, так и для списка MD там.

236
00:17:41,400 --> 00:17:44,125
Итак, если вы это сделаете,

237
00:17:44,125 --> 00:17:47,705
тогда, когда блюдо в настоящее время не выбрано,

238
00:17:47,705 --> 00:17:50,175
то ничего не будет отображаться внизу.

239
00:17:50,175 --> 00:17:53,255
Но в тот момент, когда я нажимаю на любой из блюд,

240
00:17:53,255 --> 00:17:58,005
, то вы сразу видите детали блюда, отображаемого внизу здесь.

241
00:17:58,005 --> 00:18:00,840
Теперь я могу выбрать второе блюдо, а затем сразу,

242
00:18:00,840 --> 00:18:06,000
вы заметите, что детали блюда отображаются ниже изменяется.

243
00:18:06,000 --> 00:18:09,090
Итак, в любое время, когда я нажимаю на любой из этих блюд,

244
00:18:09,090 --> 00:18:11,505
детали этого конкретного блюда,

245
00:18:11,505 --> 00:18:15,670
включая комментарии будут отображаться внизу здесь.

246
00:18:15,670 --> 00:18:20,710
Итак, это именно то, чего мы хотим достичь в этом конкретном упражнении.

247
00:18:20,710 --> 00:18:27,855
Итак, здесь вы видели использование привязки данных, три различных вида,

248
00:18:27,855 --> 00:18:31,970
включая обработчик событий и событий,

249
00:18:31,970 --> 00:18:37,110
, а также вы видели, как мы можем использовать модуль ввода, чтобы иметь возможность

250
00:18:37,110 --> 00:18:42,855
для извлечения информации в компонент, входящий из другого компонента.

251
00:18:42,855 --> 00:18:45,820
С этим, мы завершим это упражнение,

252
00:18:45,820 --> 00:18:48,750
, где мы узнали, как использовать различные функции связывания данных

253
00:18:48,750 --> 00:18:56,005
доступны в Angular для реализации нашего приложения.

254
00:18:56,005 --> 00:19:02,010
Это хорошее время для вас, чтобы сделать git commit с привязкой данных сообщения.