1
00:00:03,680 --> 00:00:10,440
Теперь, когда вы промокли ноги с Угловыми наблюдаемыми в предыдущем упражнении,

2
00:00:10,440 --> 00:00:11,860
вы оглядываетесь назад и говорите:

3
00:00:11,860 --> 00:00:14,320
«О наблюдаемые не так уж плохи в конце концов,

4
00:00:14,320 --> 00:00:17,070
они довольно просто использовать».

5
00:00:17,070 --> 00:00:19,125
Итак, мы становимся немного более амбициозными.

6
00:00:19,125 --> 00:00:25,080
Давайте пойдем на один шаг дальше, а затем использовать встроенный наблюдаемый в Angular.

7
00:00:25,080 --> 00:00:27,960
Наблюдаемые параметры, которые поступают от

8
00:00:27,960 --> 00:00:32,655
активированного сервиса маршрутизации в нашем модуле маршрутизатора.

9
00:00:32,655 --> 00:00:35,940
Теперь мы обновим компонент детализации блюда

10
00:00:35,940 --> 00:00:39,630
, чтобы использовать параметры наблюдаемые от

11
00:00:39,630 --> 00:00:42,770
службы активатора засухи, чтобы

12
00:00:42,770 --> 00:00:47,975
поддерживать некоторые новые функции в нашем угловом приложении.

13
00:00:47,975 --> 00:00:52,400
Прежде чем мы перейдем к обновлению компонента детали блюда,

14
00:00:52,400 --> 00:00:57,650
я хочу ввести еще один метод в моем файле блюдо service.ts.

15
00:00:57,650 --> 00:01:02,735
Так открыть блюдо service.ts файл, а затем мы добавим новый метод под названием

16
00:01:02,735 --> 00:01:08,060
getDishIds и это в основном будет

17
00:01:08,060 --> 00:01:14,715
вернуть все идентификаторы блюда для всех блюд в нашей коллекции блюд.

18
00:01:14,715 --> 00:01:17,650
Итак, чтобы сделать это, мы будем использовать возврат

19
00:01:17,650 --> 00:01:26,535
и метода, и прежде чем я это сделаю,

20
00:01:26,535 --> 00:01:31,915
это возвращает наблюдаемый.

21
00:01:31,915 --> 00:01:33,480
Какого рода?

22
00:01:33,480 --> 00:01:38,690
Это возвращает наблюдаемый, который состоит из массива

23
00:01:38,690 --> 00:01:44,510
строки и отложим

24
00:01:44,510 --> 00:01:50,385
его на 2 000 миллисекунд или две секунды.

25
00:01:50,385 --> 00:01:52,415
Итак, что мы хотим вернуть?

26
00:01:52,415 --> 00:01:54,895
Мы хотим взять массив посуды,

27
00:01:54,895 --> 00:01:58,730
извлечь все идентификаторы из массива посуды и

28
00:01:58,730 --> 00:02:02,665
затем дать его нашему компоненту Dish Detail,

29
00:02:02,665 --> 00:02:06,305
, потому что нам нужно, чтобы в нашем компоненте Dish Detail реализовать

30
00:02:06,305 --> 00:02:10,365
новую функцию, которую мы собираемся поддерживать в нашем приложении.

31
00:02:10,365 --> 00:02:13,725
Теперь, это один из способов, которым я хочу его реализовать.

32
00:02:13,725 --> 00:02:18,825
Позже мы видим, как мы можем сделать это гораздо лучше,

33
00:02:18,825 --> 00:02:21,240
в одном из последующих упражнений.

34
00:02:21,240 --> 00:02:24,680
На данный момент, с тем, как сервис реализован,

35
00:02:24,680 --> 00:02:32,455
это лучшее, что я мог бы сделать, чтобы реализовать это решение, чтобы продемонстрировать новую функцию.

36
00:02:32,455 --> 00:02:33,850
Итак, в пределах наблюдаемого,

37
00:02:33,850 --> 00:02:35,050
то, что я собираюсь сделать, это,

38
00:02:35,050 --> 00:02:40,070
я собираюсь взять массив посуды и массив посуды.

39
00:02:40,070 --> 00:02:43,770
Я собираюсь использовать карту,

40
00:02:44,020 --> 00:02:49,670
оператор массива, карту оператора массива JavaScript.

41
00:02:49,670 --> 00:02:51,410
Итак, оператор карты,

42
00:02:51,410 --> 00:02:58,700
, как это работает, заключается в том, что он принимает каждый элемент из массива посуды, и мы можем сопоставить

43
00:02:58,700 --> 00:03:01,760
этот элемент в другой элемент, а затем построить

44
00:03:01,760 --> 00:03:06,195
другой массив, а затем вернуть этот модифицированный массив.

45
00:03:06,195 --> 00:03:10,520
Итак, для каждого элемента в моем массиве посуды

46
00:03:10,520 --> 00:03:14,315
я собираюсь взять этот пункт, а затем вместо

47
00:03:14,315 --> 00:03:20,510
извлечь идентификатор блюда, а затем из идентификатора блюда.

48
00:03:20,510 --> 00:03:25,880
Итак, я буду строить новый массив из него,

49
00:03:25,880 --> 00:03:28,420
, который содержит только идентификаторы,

50
00:03:28,420 --> 00:03:33,515
так массив идентификаторов, и мы уже видим, что идентификаторы являются строкой,

51
00:03:33,515 --> 00:03:37,920
это то, что я собираюсь вернуть из моего идентификатора блюда здесь.

52
00:03:37,920 --> 00:03:41,500
Вот и все, оператор массива карт.

53
00:03:41,500 --> 00:03:44,800
Если вы посмотрите на операторов массива JavaScript,

54
00:03:44,800 --> 00:03:47,760
вы увидите, что делает оператор массива карты.

55
00:03:47,760 --> 00:03:50,540
Действительно, оператор массива карты также

56
00:03:50,540 --> 00:03:53,240
интересен с точки зрения наблюдаемых,

57
00:03:53,240 --> 00:03:55,910
потому что наблюдаемый, как вы видели,

58
00:03:55,910 --> 00:03:58,950
также можно рассматривать как массив,

59
00:03:58,950 --> 00:04:00,805
поток значений,

60
00:04:00,805 --> 00:04:02,330
который можно рассматривать как массив.

61
00:04:02,330 --> 00:04:05,560
Таким образом, оператор карты также может быть использован в наблюдаемых.

62
00:04:05,560 --> 00:04:11,935
Но в данный момент я использую его просто как оператор массива JavaScript.

63
00:04:11,935 --> 00:04:13,660
Давайте сохраним изменения.

64
00:04:13,660 --> 00:04:20,815
Теперь мы перейдем к компоненту Детализация Блюда, а затем обновим компонент Детализация Блюда.

65
00:04:20,815 --> 00:04:23,129
Теперь, в компоненте Деталь Блюда,

66
00:04:23,129 --> 00:04:24,790
вместе с блюдом,

67
00:04:24,790 --> 00:04:29,940
я собираюсь объявить переменную dishIds,

68
00:04:29,940 --> 00:04:32,755
который является массивом строк.

69
00:04:32,755 --> 00:04:36,470
Это dishIds будет хранить все идентификаторы

70
00:04:36,470 --> 00:04:42,225
все блюда, которые находятся в моей коллекции блюд в моем меню.

71
00:04:42,225 --> 00:04:45,410
Тогда я также буду иметь

72
00:04:45,640 --> 00:04:53,490
еще две переменные, называемые предыдущей и следующей строки типа.

73
00:04:53,490 --> 00:04:55,215
Теперь, зачем мне это нужно?

74
00:04:55,215 --> 00:04:56,980
Это станет немного яснее,

75
00:04:56,980 --> 00:04:58,790
, как только вы реализуете представление,

76
00:04:58,790 --> 00:05:00,560
, где я собираюсь использовать это.

77
00:05:00,560 --> 00:05:04,480
Теперь, что я буду делать здесь, это то, что

78
00:05:04,480 --> 00:05:10,610
внутри моего ngInit раньше,

79
00:05:10,610 --> 00:05:18,800
мы сделали, чтобы id равен плюс этот идентификатор параметров route.snapshot.

80
00:05:18,800 --> 00:05:22,565
Когда я делал это в предыдущем упражнении,

81
00:05:22,565 --> 00:05:28,580
я не объяснял вам, что делает снимок и почему мы делаем это так?

82
00:05:28,580 --> 00:05:31,490
Потому что вам нужно было понять наблюдаемые,

83
00:05:31,490 --> 00:05:34,060
, прежде чем вы поймете, что означает снимок.

84
00:05:34,060 --> 00:05:43,940
Теперь, в Angular, активированный сервис маршрутов предоставляет набор наблюдаемых.

85
00:05:43,940 --> 00:05:46,775
Один из наблюдаемых называется params.

86
00:05:46,775 --> 00:05:48,860
То, что эти параметры предоставляют нам,

87
00:05:48,860 --> 00:05:56,030
- это способ получения значений параметров в моем URL.

88
00:05:56,030 --> 00:06:00,170
Итак, вы увидели, что при введении параметров маршрута

89
00:06:00,170 --> 00:06:03,605
вы ввели один из параметров маршрута в качестве двоеточия.

90
00:06:03,605 --> 00:06:07,590
Этот идентификатор двоеточия становится доступным как наблюдаемый.

91
00:06:07,590 --> 00:06:10,330
Итак, всякий раз, когда это значение изменилось,

92
00:06:10,330 --> 00:06:15,745
вы можете наблюдать изменения в этом значении, а затем принимать соответствующие меры.

93
00:06:15,745 --> 00:06:21,010
Но раньше, когда мы реализовали компонент детализации блюда,

94
00:06:21,010 --> 00:06:22,825
мы не знали о наблюдаемых.

95
00:06:22,825 --> 00:06:26,200
Итак, я не мог объяснить, что делал снимок в тот момент.

96
00:06:26,200 --> 00:06:30,460
Теперь позвольте мне вернуться и объяснить, что именно делает снимок.

97
00:06:30,460 --> 00:06:32,870
Когда мы используем это как моментальный снимок здесь,

98
00:06:32,870 --> 00:06:34,250
то, что мы делаем, это,

99
00:06:34,250 --> 00:06:37,580
мы берем один снимок из

100
00:06:37,580 --> 00:06:40,250
маршрутной службы, а затем мы получаем

101
00:06:40,250 --> 00:06:43,605
параметр наблюдаемый в этот конкретный момент времени.

102
00:06:43,605 --> 00:06:46,310
Значение параметров в этот конкретный момент

103
00:06:46,310 --> 00:06:49,340
времени, а затем использование его в нашем приложении.

104
00:06:49,340 --> 00:06:51,730
Хотя это не идеальный способ сделать это.

105
00:06:51,730 --> 00:06:55,010
Вместо этого давайте использовать наблюдаемый

106
00:06:55,010 --> 00:06:59,990
напрямую, а затем реагировать всякий раз, когда это наблюдаемые изменения.

107
00:06:59,990 --> 00:07:04,650
Итак, как мы обновляем этот код, чтобы использовать наблюдаемый напрямую?

108
00:07:04,650 --> 00:07:08,030
Итак, мы понимаем, что из активированного маршрутного сервиса

109
00:07:08,030 --> 00:07:10,390
у нас есть доступные параметры.

110
00:07:10,390 --> 00:07:13,070
Таким образом, мы будем использовать параметры наблюдаемых и

111
00:07:13,070 --> 00:07:16,755
в любое время есть изменение, где параметры наблюдаемые,

112
00:07:16,755 --> 00:07:22,750
мы можем инициировать изменение в рамках нашего компонента DishDetail.

113
00:07:22,750 --> 00:07:25,820
Позвольте мне проиллюстрировать вам, как мы будем использовать

114
00:07:25,820 --> 00:07:28,935
параметры, наблюдаемые путем обновления этого кода.

115
00:07:28,935 --> 00:07:30,735
Итак, перейдя к этому коду,

116
00:07:30,735 --> 00:07:32,630
то, что я собираюсь сделать сейчас,

117
00:07:32,630 --> 00:07:37,615
заключается в том, что я собираюсь изменить это, сказав:

118
00:07:37,615 --> 00:07:42,950
«У меня есть этот маршрут и с этого маршрута,

119
00:07:42,950 --> 00:07:45,640
у меня уже есть параметры».

120
00:07:45,640 --> 00:07:50,030
Итак, я собираюсь удалить снимок, и я использую параметры.

121
00:07:50,030 --> 00:07:52,060
Итак, с этими параметрами

122
00:07:52,060 --> 00:08:00,410
то, что у меня теперь есть доступ к парамам наблюдаемых.

123
00:08:00,410 --> 00:08:03,235
Теперь, поскольку у нас есть эти параметры наблюдаемые,

124
00:08:03,235 --> 00:08:09,545
я собираюсь использовать оператор на этих наблюдаемых парамах, а затем модифицировать его.

125
00:08:09,545 --> 00:08:17,275
Итак, оператор, который я собираюсь использовать, называется оператором switchMap.

126
00:08:17,275 --> 00:08:21,050
Оператор switchMap позволяет мне

127
00:08:21,050 --> 00:08:26,230
использовать наблюдаемые параметры, и вы видите красную линию squiggly, что означает,

128
00:08:26,230 --> 00:08:31,590
, что мне нужно импортировать switchMap, наблюдаемый здесь.

129
00:08:31,590 --> 00:08:34,320
Итак, я перейду к

130
00:08:34,320 --> 00:08:39,660
мои входы здесь и

131
00:08:39,660 --> 00:08:45,880
, затем я буду вводить rxjs и оператор.

132
00:08:49,640 --> 00:08:52,710
Итак, из наблюдаемых параметров

133
00:08:52,710 --> 00:08:57,740
я получаю параметры, которые имеют тип Params.

134
00:08:57,740 --> 00:09:05,700
Итак, помните, что здесь мы импортировали параметры из библиотеки маршрутизатора.

135
00:09:05,700 --> 00:09:07,520
Итак, мы умоляли параметры здесь,

136
00:09:07,520 --> 00:09:12,289
из библиотеки маршрутизатора, а также импортировали сервис маршрута активации здесь,

137
00:09:12,289 --> 00:09:15,800
, а затем сделали их доступными в нашем конструкторе здесь,

138
00:09:15,800 --> 00:09:18,225
через маршрут активации.

139
00:09:18,225 --> 00:09:25,055
Итак, вот почему мы можем сделать этот маршрут параметры, чтобы получить параметры наблюдаемых.

140
00:09:25,055 --> 00:09:27,740
Я собираюсь использовать оператор switchMap на парамах

141
00:09:27,740 --> 00:09:34,049
наблюдаемых, а затем, когда я получаю наблюдаемые параметры,

142
00:09:34,049 --> 00:09:44,880
то, что я собираюсь сделать, это взять это, а затем сказать, это dishService.

143
00:09:45,030 --> 00:09:54,370
GetDish, а затем этот идентификатор теперь должен быть получен с помощью параметров.

144
00:09:54,370 --> 00:09:58,600
Вы видите параметр, который у нас есть.

145
00:09:58,600 --> 00:10:04,765
Из параметров, я скажу в скобках ID.

146
00:10:04,765 --> 00:10:11,490
Итак, что происходит, так это то, что всякий раз, когда наблюдаемые параметры изменяют значение,

147
00:10:11,490 --> 00:10:17,680
, что означает, что параметр маршрута изменяет значение, то немедленно

148
00:10:17,680 --> 00:10:20,900
оператор карты коммутатора будет принимать значение параметров,

149
00:10:20,900 --> 00:10:25,320
, а затем делать getDish из моего dishService.

150
00:10:25,320 --> 00:10:27,060
Таким образом, это будет автоматически инициировано,

151
00:10:27,060 --> 00:10:31,280
и это будет доступно как другой

152
00:10:31,280 --> 00:10:36,900
наблюдаемый, который испускается, выполняя этот оператор карты переключения на этом наблюдаемом.

153
00:10:36,900 --> 00:10:41,580
Итак, мы создаем новый наблюдаемый, который является getDish,

154
00:10:41,580 --> 00:10:45,820
, который собирается вернуть объект блюда здесь.

155
00:10:45,820 --> 00:10:49,285
Теперь, как только мы получим getDish там,

156
00:10:49,285 --> 00:10:53,350
, то это теперь может быть доступно как наблюдаемый.

157
00:10:53,350 --> 00:10:57,700
Я просто подписываюсь на это наблюдаемое, используя подписку здесь.

158
00:10:57,700 --> 00:10:59,815
Затем я получаю блюдо.

159
00:10:59,815 --> 00:11:03,930
Это блюдо получается, делая это getDish здесь.

160
00:11:03,930 --> 00:11:08,790
Это блюдо, тогда я могу использовать, чтобы сопоставить его в

161
00:11:08,790 --> 00:11:14,025
мою переменную блюда, которую я объявил ранее.

162
00:11:14,025 --> 00:11:17,790
Итак, таким образом, мое блюдо теперь обновляется.

163
00:11:17,790 --> 00:11:20,775
Итак, в любое время, когда параметры наблюдаемые изменения,

164
00:11:20,775 --> 00:11:24,210
мое блюдо будет обновлено до нового блюда.

165
00:11:24,210 --> 00:11:27,590
Итак, обратите внимание, как я принимаю один наблюдаемый, параметры наблюдаемые,

166
00:11:27,590 --> 00:11:33,050
, а затем я сопоставляю параметры наблюдаемые в другой наблюдаемый, который в основном

167
00:11:33,050 --> 00:11:40,675
собирается в извлечению значения блюда из моего dishService,

168
00:11:40,675 --> 00:11:42,955
, а затем делая это доступным как наблюдаемый.

169
00:11:42,955 --> 00:11:48,010
Затем я подписываюсь на это наблюдаемое здесь, а затем,

170
00:11:48,010 --> 00:11:49,780
я получаю значение блюда здесь,

171
00:11:49,780 --> 00:11:52,720
, а затем я сопоставляю значение блюда или скорее

172
00:11:52,720 --> 00:11:56,795
делая переменную блюда равной значению блюда здесь.

173
00:11:56,795 --> 00:12:00,415
Обратите внимание, как с помощью наблюдаемых,

174
00:12:00,415 --> 00:12:04,865
вы теперь можете взять один наблюдаемый, а затем сопоставить его в другой наблюдаемый.

175
00:12:04,865 --> 00:12:06,730
Почему это интересно?

176
00:12:06,730 --> 00:12:12,680
Если сейчас, у меня есть способ изменить этот параметр маршрута,

177
00:12:12,680 --> 00:12:19,005
, то я смогу переключаться между разными блюдами и видеть разные блюда.

178
00:12:19,005 --> 00:12:22,100
К сожалению, у меня этого нет.

179
00:12:22,100 --> 00:12:25,735
Итак, мне нужно изменить компоненты блюда, чтобы я мог это сделать.

180
00:12:25,735 --> 00:12:31,545
Теперь, вот где я включу пару кнопок в свой взгляд, которые, когда я нажимаю,

181
00:12:31,545 --> 00:12:36,390
я смогу перемещаться по моему списку блюд.

182
00:12:36,390 --> 00:12:38,960
Теперь, чтобы иметь возможность перемещаться по моему списку блюд,

183
00:12:38,960 --> 00:12:42,005
Мне нужно знать набор всех моих блюд,

184
00:12:42,005 --> 00:12:45,525
или, по крайней мере, мне нужно знать идентификаторы всех моих блюд.

185
00:12:45,525 --> 00:12:51,410
Вот почему я использую эту посуду здесь, ясно?

186
00:12:51,410 --> 00:12:58,800
Итак, теперь вы видите, почему я включил метод dishIds в свой dishService.

187
00:12:58,800 --> 00:13:01,455
Итак, тогда я начинаю.

188
00:13:01,455 --> 00:13:05,830
Я собираюсь сначала получить

189
00:13:05,830 --> 00:13:10,510
dishIds по

190
00:13:10,510 --> 00:13:16,970
, вызывающий dishService,

191
00:13:17,070 --> 00:13:22,570
getDishIds метод в этот момент.

192
00:13:22,570 --> 00:13:25,735
Я все еще работаю со старым способом делать вещи.

193
00:13:25,735 --> 00:13:34,795
Я должен осознать, что этот getDishIds отправляет в наблюдаемый.

194
00:13:34,795 --> 00:13:39,365
Итак, мне нужно подписаться на это наблюдаемое.

195
00:13:39,365 --> 00:13:43,910
Вы видите, как вам нужно изменить свой образ мышления, когда

196
00:13:43,910 --> 00:13:48,340
вы работаете с переменными здесь.

197
00:13:48,340 --> 00:13:52,840
Итак, мы бы сказали dishIds subscribe,

198
00:13:52,840 --> 00:13:54,935
и внутри subscribe,

199
00:13:54,935 --> 00:14:00,990
мы получим параметр, который является строковым массивом,

200
00:14:00,990 --> 00:14:04,170
, а затем я бы сказал прямо там,

201
00:14:04,170 --> 00:14:09,970
dishIds будут равны dishIds.

202
00:14:09,970 --> 00:14:14,085
Смотрите, как легко

203
00:14:14,085 --> 00:14:18,510
изменить свой образ мышления, когда вы хотите иметь дело с наблюдаемым.

204
00:14:18,510 --> 00:14:20,895
Итак, getDishIds отправляет наблюдаемый,

205
00:14:20,895 --> 00:14:26,790
, и я подписываюсь на это наблюдаемое, а затем у меня есть dishIds здесь доступны.

206
00:14:26,790 --> 00:14:29,130
Затем, также подписавшись на параметр.

207
00:14:29,130 --> 00:14:31,500
Если я могу изменить свой параметр,

208
00:14:31,500 --> 00:14:35,340
значение параметра маршрута в моем коде,

209
00:14:35,340 --> 00:14:38,300
, то я смогу перемещаться среди блюд.

210
00:14:38,300 --> 00:14:41,240
Итак, давайте воплотим эту часть.

211
00:14:41,240 --> 00:14:43,810
Это становится интересным.

212
00:14:43,810 --> 00:14:47,515
Итак, чтобы я мог это сделать,

213
00:14:47,515 --> 00:14:53,190
, поэтому я введу еще один метод, называемый setPrevNext,

214
00:14:55,770 --> 00:15:03,480
, и к этому я отправлю параметр dishId.

215
00:15:03,480 --> 00:15:06,295
Теперь, учитывая мой текущий dishId,

216
00:15:06,295 --> 00:15:11,355
я хотел иметь возможность найти предыдущий и следующий dishId, чтобы я мог реализовать

217
00:15:11,355 --> 00:15:17,545
мою навигацию между блюдами в моем компоненте dishdetail.

218
00:15:17,545 --> 00:15:22,635
Так вот, по этой причине я объявил прев и следующий.

219
00:15:22,635 --> 00:15:25,555
Теперь мне нужно иметь возможность инициализировать эти два значения.

220
00:15:25,555 --> 00:15:28,650
Все, что я знаю сейчас, это мое блюдо.

221
00:15:28,650 --> 00:15:30,610
Итак, используя текущий dishId,

222
00:15:30,610 --> 00:15:34,265
я хочу иметь возможность найти предыдущий и следующий dishId.

223
00:15:34,265 --> 00:15:36,080
Итак, в этом методе

224
00:15:36,080 --> 00:15:40,255
я собираюсь сделать предыдущий и следующий dishId.

225
00:15:40,255 --> 00:15:42,160
Итак, вот я скажу,

226
00:15:42,160 --> 00:15:50,200
пусть индекс равен этому dishIds.

227
00:15:50,200 --> 00:15:52,900
Теперь я знаю только идентификатор моего блюда,

228
00:15:52,900 --> 00:15:55,360
но идентификатор моего блюда не дает мне всего.

229
00:15:55,360 --> 00:16:00,980
Мне нужно иметь возможность найти блюдо в этом массиве идентификаторов

230
00:16:00,980 --> 00:16:06,510
, поэтому я говорю это dishIds, и indexOf.

231
00:16:06,510 --> 00:16:13,640
Вы должны знать оператор indexOf в массиве JavaScript.

232
00:16:13,640 --> 00:16:20,935
Оператор indexOf принимает значение, а затем находит индекс этого значения в массиве.

233
00:16:20,935 --> 00:16:27,605
Итак, indexOf и параметр здесь,

234
00:16:27,605 --> 00:16:29,945
я дам это dishId,

235
00:16:29,945 --> 00:16:34,765
dishId, который я получу за короткое время.

236
00:16:34,765 --> 00:16:38,765
Теперь, как только я получу индекс этого текущего значения,

237
00:16:38,765 --> 00:16:42,385
я могу затем сопоставить

238
00:16:42,385 --> 00:16:49,420
два предыдущих dishIds.

239
00:16:49,420 --> 00:16:59,080
Итак, вот где я

240
00:16:59,080 --> 00:17:08,980
сделаю немного сложного кода здесь, который позволит мне обернуться, когда я буду.

241
00:17:08,980 --> 00:17:15,030
Итак, обратите внимание, что этот массив dishIds содержит определенное количество значений.

242
00:17:15,030 --> 00:17:20,270
Если мое текущее значение моего dishId является первым элементом,

243
00:17:20,270 --> 00:17:24,565
, то предыдущее значение будет индексированным нулем элементом в моем массиве.

244
00:17:24,565 --> 00:17:26,590
Но если мое текущее значение является нулевым элементом,

245
00:17:26,590 --> 00:17:28,235
самым первым элементом в моем массиве,

246
00:17:28,235 --> 00:17:32,530
, я хочу обернуться, чтобы получить последний элемент в моем массиве.

247
00:17:32,530 --> 00:17:36,770
Итак, вот где я использую оператор modulo с

248
00:17:36,770 --> 00:17:42,235
некоторый математический способ обертывания вещей вокруг.

249
00:17:42,235 --> 00:17:44,275
Итак, я бы сказал, что это dishId

250
00:17:44,275 --> 00:18:14,500
плюс индекс минус один, и по модулю длина этого блюда.

251
00:18:14,500 --> 00:18:15,925
Итак, что я делаю,

252
00:18:15,925 --> 00:18:19,590
предыдущее значение будет текущим индексом,

253
00:18:19,590 --> 00:18:21,735
индексом текущего значения,

254
00:18:21,735 --> 00:18:25,935
плюс длина блюд минус один.

255
00:18:25,935 --> 00:18:27,815
Теперь, если индекс один,

256
00:18:27,815 --> 00:18:29,585
индекс минус один даст мне ноль.

257
00:18:29,585 --> 00:18:30,680
Если индекс равен нулю,

258
00:18:30,680 --> 00:18:32,670
индекс минус один даст мне минус один,

259
00:18:32,670 --> 00:18:34,210
но это не то, что я хочу.

260
00:18:34,210 --> 00:18:38,190
Я хочу обернуть вокруг и получить dishId длину минус один.

261
00:18:38,190 --> 00:18:41,870
Итак, вот почему я включаю это там,

262
00:18:41,870 --> 00:18:44,995
, а затем делаю модуль с dishIds.

263
00:18:44,995 --> 00:18:47,660
Итак, когда индекс равен нулю,

264
00:18:47,660 --> 00:18:51,915
я обернусь, чтобы получить последний элемент в моем массиве.

265
00:18:51,915 --> 00:18:56,965
Итак, вот как я инициализирую предыдущее значение.

266
00:18:56,965 --> 00:18:59,120
Затем следующее значение

267
00:18:59,120 --> 00:19:02,700
Я буду использовать тот же подход,

268
00:19:02,770 --> 00:19:08,205
, но обернуться, говоря индекс плюс один.

269
00:19:08,205 --> 00:19:11,780
Итак, если я в настоящее время нахожусь на последнем элементе в массиве,

270
00:19:11,780 --> 00:19:14,200
, то я хочу обернуть до нуля.

271
00:19:14,200 --> 00:19:16,715
Итак, это другая часть того, что я делаю.

272
00:19:16,715 --> 00:19:19,200
Итак, там, я устанавливаю предыдущий и следующий.

273
00:19:19,200 --> 00:19:21,795
Итак, когда я должен установить предыдущий и следующий?

274
00:19:21,795 --> 00:19:23,965
Каждый раз, когда мое блюдо меняется,

275
00:19:23,965 --> 00:19:27,630
мне нужно иметь возможность инициировать звонок к этому.

276
00:19:27,630 --> 00:19:30,590
Теперь, где я меняю свою ценность блюда?

277
00:19:30,590 --> 00:19:34,365
Оглядываясь назад на подписку здесь,

278
00:19:34,365 --> 00:19:35,905
обратите внимание, что прямо там,

279
00:19:35,905 --> 00:19:40,180
вы меняете свое блюдо каждый раз, когда наши параметры меняются.

280
00:19:40,180 --> 00:19:42,035
Итак, в этот момент

281
00:19:42,035 --> 00:19:45,495
я хочу сбросить мое предыдущее и следующее значение.

282
00:19:45,495 --> 00:19:51,940
Итак, я собираюсь изменить это в блок кода здесь.

283
00:19:51,940 --> 00:19:57,250
Тогда я бы сказал, что это setPrevNext,

284
00:19:57,250 --> 00:20:02,170
, а затем параметр будет dishId.

285
00:20:04,370 --> 00:20:07,970
Вот оно. Итак, с этим изменением,

286
00:20:07,970 --> 00:20:11,155
что происходит каждый раз, когда мое блюдо обновляется,

287
00:20:11,155 --> 00:20:17,085
я обновлю предыдущее и следующее также соответственно отсюда.

288
00:20:17,085 --> 00:20:19,605
Итак, с этим небольшим изменением,

289
00:20:19,605 --> 00:20:23,150
мое блюдо будет текущим.

290
00:20:23,150 --> 00:20:25,530
Предыдущее будет указывать на предыдущее блюдо,

291
00:20:25,530 --> 00:20:28,690
и следующее будет указано на следующее блюдо.

292
00:20:28,690 --> 00:20:31,565
Итак, у меня есть все три, что мне нужно.

293
00:20:31,565 --> 00:20:37,460
Теперь я могу использовать эти три значения, чтобы реализовать способ навигации

294
00:20:37,460 --> 00:20:43,325
среди блюд в моем шаблоне, включив пару кнопок в мой шаблон.

295
00:20:43,325 --> 00:20:48,775
Итак, давайте перейдем к шаблону компонентов dishdetail

296
00:20:48,775 --> 00:20:53,569
, а затем включим пару кнопок, которые позволяют мне перемещаться среди блюд.

297
00:20:53,569 --> 00:20:58,535
Перейдя к компоненту Dish Detail, пока я здесь,

298
00:20:58,535 --> 00:21:06,150
позвольте мне взять этот ngIf с этой карты, а затем переместить его в div там.

299
00:21:06,150 --> 00:21:08,445
Я хочу скрыть весь div,

300
00:21:08,445 --> 00:21:10,850
, когда мое блюдо в настоящее время не дефект,

301
00:21:10,850 --> 00:21:13,515
аналогично для комментариев также.

302
00:21:13,515 --> 00:21:16,440
Я нахожу, что это немного обжаривает

303
00:21:16,440 --> 00:21:19,700
, когда информация о блюде извлекается с сервера.

304
00:21:19,700 --> 00:21:24,945
Итак, я сделаю это изменение для обоих divs, которые

305
00:21:24,945 --> 00:21:32,810
один показывает комментарии, а другой показывает детали блюда в карточке.

306
00:21:32,810 --> 00:21:35,170
С этими двумя обновлениями,

307
00:21:35,170 --> 00:21:37,210
внутри моей карты действий,

308
00:21:37,210 --> 00:21:38,605
Я собираюсь включить

309
00:21:38,605 --> 00:21:49,165
еще одну кнопку типа кнопки очевидно и эта кнопка,

310
00:21:49,165 --> 00:21:55,165
я включу routerLink.

311
00:21:55,165 --> 00:21:57,320
В тот момент, когда вы видите ссылку маршрутизатора,

312
00:21:57,320 --> 00:21:58,775
вы сразу говорите: «О,

313
00:21:58,775 --> 00:22:00,620
я знаю, что вы пытаетесь сделать.

314
00:22:00,620 --> 00:22:04,890
Вы пытаетесь преобразовать эту кнопку, чтобы иметь возможность перемещаться между

315
00:22:04,890 --> 00:22:11,720
различными компонентами в моем сервисе.»

316
00:22:11,720 --> 00:22:14,000
Итак, для routerLink,

317
00:22:14,000 --> 00:22:22,870
я собираюсь предоставить массив значений и массив значений для routerLink,

318
00:22:22,870 --> 00:22:27,135
Я собираюсь сделать dishdetail.

319
00:22:27,135 --> 00:22:30,665
Также вторая часть.

320
00:22:30,665 --> 00:22:33,330
Видишь, это интересная часть.

321
00:22:33,330 --> 00:22:37,125
Вторая часть этого массива будет prev,

322
00:22:37,125 --> 00:22:43,090
, которая является переменной, которую я объявил в своем компоненте.

323
00:22:43,090 --> 00:22:52,905
Итак, при этом эта кнопка станет ссылкой на предыдущее блюдо в моем списке блюд.

324
00:22:52,905 --> 00:22:55,615
Спиффи, верно?

325
00:22:55,615 --> 00:23:01,010
Итак, с этим, что еще?

326
00:23:02,010 --> 00:23:07,550
Позвольте мне закрыть кнопку здесь, а затем внутри кнопки,

327
00:23:07,550 --> 00:23:16,890
Я собираюсь использовать шрифт Awesome значок

328
00:23:22,360 --> 00:23:26,550
фа шеврон слева.

329
00:23:32,670 --> 00:23:37,935
Так вот и все. Эта кнопка будет кнопкой с иконкой.

330
00:23:37,935 --> 00:23:40,605
Итак, теперь у нас есть одна кнопка здесь,

331
00:23:40,605 --> 00:23:43,465
Я также собираюсь включить еще одну кнопку здесь.

332
00:23:43,465 --> 00:23:44,880
Прежде чем включить кнопку,

333
00:23:44,880 --> 00:23:50,330
я буду делать span класса flex-spacer,

334
00:23:50,330 --> 00:23:55,210
вы видели меня с помощью гибкого распора в одном из предыдущих упражнений.

335
00:23:55,210 --> 00:23:56,855
Итак, вы видите, что я делаю,

336
00:23:56,855 --> 00:24:00,695
Я растягиваюсь, чтобы включить вторую кнопку.

337
00:24:00,695 --> 00:24:02,270
Итак, для второй кнопки

338
00:24:02,270 --> 00:24:05,040
Я просто собираюсь скопировать это

339
00:24:06,780 --> 00:24:13,190
, а затем вставить его туда, а затем обновить этот, чтобы сказать prev.

340
00:24:13,190 --> 00:24:16,730
Вместо предыдущего я пойду дальше, а затем

341
00:24:16,730 --> 00:24:23,335
фа-шеврон влево на фа-шеврон вправо, и все.

342
00:24:23,335 --> 00:24:28,049
Давайте сохраним изменения в наших компонентах Dish Detail,

343
00:24:28,049 --> 00:24:30,760
, а также остальные файлы.

344
00:24:30,760 --> 00:24:35,340
После этого обновления, давайте пойдем и посмотрим, что делает наше приложение.

345
00:24:35,340 --> 00:24:38,065
Перейдя в мое приложение в браузере,

346
00:24:38,065 --> 00:24:40,500
перейдем к компоненту Menu.

347
00:24:40,500 --> 00:24:46,240
Мы видим Меню и давайте выберем один пункт из Меню здесь.

348
00:24:46,240 --> 00:24:53,270
Итак, обратите внимание, что теперь этот пункт из меню блюда отображается здесь.

349
00:24:53,270 --> 00:24:55,225
Обратите внимание внизу,

350
00:24:55,225 --> 00:24:58,835
у нас есть две кнопки здесь, слева и справа.

351
00:24:58,835 --> 00:25:01,440
Когда мы нажимаем на левую кнопку,

352
00:25:01,440 --> 00:25:08,875
обратите внимание, как мы можем перейти к предыдущему блюду в списке блюд.

353
00:25:08,875 --> 00:25:15,515
Я могу продолжать делать влево снова и продолжать навигацию влево и вправо.

354
00:25:15,515 --> 00:25:17,980
Обратите внимание, что когда я это делаю,

355
00:25:17,980 --> 00:25:22,655
мое фактическое представление не перезагружается,

356
00:25:22,655 --> 00:25:25,190
вместо этого я буду только извлекать

357
00:25:25,190 --> 00:25:34,955
данные, связанные с блюдом из службы, а затем обновлять мое представление здесь.

358
00:25:34,955 --> 00:25:38,350
Причина, по которой мы можем сделать это, заключается в том, что у нас

359
00:25:38,350 --> 00:25:43,445
есть наблюдаемые, параметры наблюдаемые.

360
00:25:43,445 --> 00:25:45,890
Итак, в любое время, когда я нажимаю на этих двух,

361
00:25:45,890 --> 00:25:48,860
влево и вправо, параметры наблюдаемые,

362
00:25:48,860 --> 00:25:56,620
обратите внимание, как в этот момент адрес показывает dishdetail ноль.

363
00:25:56,620 --> 00:25:58,315
Если я нажму справа,

364
00:25:58,315 --> 00:26:02,925
, то это будет обновлено от dishdetail нуля до dishdetail одного.

365
00:26:02,925 --> 00:26:07,560
Это изменение параметра, и это приведет к тому, что мой наблюдаемый

366
00:26:07,560 --> 00:26:12,245
пойти и получить новое блюдо из сервисного обслуживания.

367
00:26:12,245 --> 00:26:14,980
Затем извлекается новое блюдо,

368
00:26:14,980 --> 00:26:20,285
переменная блюда в моем компоненте обновляется,

369
00:26:20,285 --> 00:26:21,885
, и когда это обновляется,

370
00:26:21,885 --> 00:26:23,640
мое представление также обновляется.

371
00:26:23,640 --> 00:26:28,185
Итак, обратите внимание, что я использую тот же вид,

372
00:26:28,185 --> 00:26:36,440
Я могу перемещаться среди различных блюд, которые являются частью моего списка блюд.

373
00:26:36,440 --> 00:26:42,470
Это интересная часть, которую вы можете получить, используя параметры

374
00:26:42,470 --> 00:26:49,250
наблюдаемые из activator.service в вашем угловом приложении.

375
00:26:49,250 --> 00:26:56,355
Интересный способ использования наблюдаемых счетов нашего углового приложения.

376
00:26:56,355 --> 00:26:59,640
Конечно, то, как я его реализовал,

377
00:26:59,640 --> 00:27:03,210
я сделал это немного надуманный способ делать вещи.

378
00:27:03,210 --> 00:27:07,965
Мне пришлось достать список идентификаторов блюд.

379
00:27:07,965 --> 00:27:12,760
Мне пришлось изменить предыдущий и следующий и так далее.

380
00:27:12,760 --> 00:27:16,360
Если у вас был способ получить предыдущее

381
00:27:16,360 --> 00:27:20,000
и следующее значение автоматически от вашего сервиса,

382
00:27:20,000 --> 00:27:22,015
всякий раз, когда вы получаете блюдо,

383
00:27:22,015 --> 00:27:26,895
то реализация партитуры станет немного проще.

384
00:27:26,895 --> 00:27:28,705
Сейчас у нас этого нет.

385
00:27:28,705 --> 00:27:33,430
Итак, я работал над проблемой, потому что я просто хотел проиллюстрировать способ

386
00:27:33,430 --> 00:27:38,855
использования наблюдаемого в вашем угловом приложении.

387
00:27:38,855 --> 00:27:43,270
Если мы сможем реализовать сервис, который будет возвращать

388
00:27:43,270 --> 00:27:47,320
предыдущее и следующее значение всякий раз, когда мы берем блюдо,

389
00:27:47,320 --> 00:27:53,640
то вся эта головная боль будет намного проще решена.

390
00:27:53,640 --> 00:27:58,810
Давайте отложим эту идею на более поздний этап.

391
00:27:58,810 --> 00:28:01,930
Но на данный момент вы видите, как мы делаем

392
00:28:01,930 --> 00:28:05,250
использование наблюдаемых параметров для того, чтобы реализовать

393
00:28:05,250 --> 00:28:12,605
интересный способ поддержки новой функции в нашем угловом приложении.

394
00:28:12,605 --> 00:28:16,325
Это завершает это упражнение.

395
00:28:16,325 --> 00:28:24,000
Это хорошее время для вас, чтобы сделать git commit с сообщением RXJS Часть вторая.