1
00:00:03,680 --> 00:00:10,440
Ahora que te has mojado los pies con observables angulares en el ejercicio anterior,

2
00:00:10,440 --> 00:00:11,860
estás mirando hacia atrás y diciendo:

3
00:00:11,860 --> 00:00:14,320
«Oh observables no son tan malos después de todo,

4
00:00:14,320 --> 00:00:17,070
son bastante sencillos de hacer uso de».

5
00:00:17,070 --> 00:00:19,125
Por lo tanto, nos hacemos un poco más ambiciosos.

6
00:00:19,125 --> 00:00:25,080
Vamos un paso más allá y luego hagamos uso de un observable incorporado dentro de Angular.

7
00:00:25,080 --> 00:00:27,960
Los parámetros observables que provienen de

8
00:00:27,960 --> 00:00:32,655
el servicio de ruta activado dentro de nuestro módulo de router.

9
00:00:32,655 --> 00:00:35,940
Ahora vamos a actualizar el componente de detalle del plato,

10
00:00:35,940 --> 00:00:39,630
para hacer uso de los parámetros observables desde

11
00:00:39,630 --> 00:00:42,770
el servicio de sequía activador a

12
00:00:42,770 --> 00:00:47,975
apoyar algunas nuevas características dentro de nuestra aplicación Angular.

13
00:00:47,975 --> 00:00:52,400
Antes de pasar a actualizar el componente de detalle del plato,

14
00:00:52,400 --> 00:00:57,650
quiero introducir un método más en mi archivo dish service.ts.

15
00:00:57,650 --> 00:01:02,735
Así que abra el archivo service.ts plato y luego agregaremos un nuevo método llamado

16
00:01:02,735 --> 00:01:08,060
getDisYids y esto básicamente será

17
00:01:08,060 --> 00:01:14,715
devolver todos los ID plato es para todos los platos en nuestra colección de platos.

18
00:01:14,715 --> 00:01:17,650
Entonces, para hacer eso, usaremos un retorno

19
00:01:17,650 --> 00:01:26,535
y de método y antes de hacerlo,

20
00:01:26,535 --> 00:01:31,915
esto está devolviendo un observable.

21
00:01:31,915 --> 00:01:33,480
¿De qué tipo?

22
00:01:33,480 --> 00:01:38,690
Esto devuelve un observable que consiste en una matriz de cadena

23
00:01:38,690 --> 00:01:44,510
y vamos a retrasarlo

24
00:01:44,510 --> 00:01:50,385
por 2.000 milisegundos o dos segundos.

25
00:01:50,385 --> 00:01:52,415
Entonces, ¿qué es lo que queremos devolver?

26
00:01:52,415 --> 00:01:54,895
Queremos tomar la matriz de platos,

27
00:01:54,895 --> 00:01:58,730
extraer todos los ID de la matriz de platos y

28
00:01:58,730 --> 00:02:02,665
luego dársela a nuestro componente Dish Detail,

29
00:02:02,665 --> 00:02:06,305
porque necesitamos que dentro de nuestro componente Dish Detail para implementar

30
00:02:06,305 --> 00:02:10,365
la nueva característica que vamos a apoyar en nuestra aplicación.

31
00:02:10,365 --> 00:02:13,725
Ahora, esta es una forma en la que quiero implementarlo.

32
00:02:13,725 --> 00:02:18,825
Más adelante, podemos ver cómo podemos hacerlo de una manera mucho mejor,

33
00:02:18,825 --> 00:02:21,240
en uno de los ejercicios posteriores.

34
00:02:21,240 --> 00:02:24,680
Por el momento, con la forma en que se implementa el servicio,

35
00:02:24,680 --> 00:02:32,455
esto es lo mejor que pude hacer para implementar esta solución para demostrar una nueva característica.

36
00:02:32,455 --> 00:02:33,850
Así que, dentro de lo observable,

37
00:02:33,850 --> 00:02:35,050
lo que voy a hacer es,

38
00:02:35,050 --> 00:02:40,070
voy a tomar la matriz de platos y a la matriz de platos.

39
00:02:40,070 --> 00:02:43,770
Voy a usar el mapa,

40
00:02:44,020 --> 00:02:49,670
un operador de matriz, el mapa del operador de matriz JavaScript.

41
00:02:49,670 --> 00:02:51,410
Entonces, el operador del mapa,

42
00:02:51,410 --> 00:02:58,700
cómo funciona es que toma cada elemento de la matriz de platos y podemos mapear

43
00:02:58,700 --> 00:03:01,760
ese elemento en otro elemento y luego construir

44
00:03:01,760 --> 00:03:06,195
otra matriz y luego devolver esa matriz modificada.

45
00:03:06,195 --> 00:03:10,520
Entonces, para cada elemento en mi matriz de platos,

46
00:03:10,520 --> 00:03:14,315
voy a tomar ese artículo y luego

47
00:03:14,315 --> 00:03:20,510
extraer el ID del plato y luego del ID del plato.

48
00:03:20,510 --> 00:03:25,880
Entonces, terminaré construyendo una nueva matriz a partir de ella,

49
00:03:25,880 --> 00:03:28,420
que contiene solo los ID,

50
00:03:28,420 --> 00:03:33,515
por lo que una matriz de ID y ya vemos que los ID son string,

51
00:03:33,515 --> 00:03:37,920
eso es lo que voy a devolver de mi ID de plato aquí.

52
00:03:37,920 --> 00:03:41,500
Eso es todo, el operador de la matriz de mapas.

53
00:03:41,500 --> 00:03:44,800
Si busca operadores de matriz JavaScript,

54
00:03:44,800 --> 00:03:47,760
verá lo que hace el operador de matriz de mapa.

55
00:03:47,760 --> 00:03:50,540
De hecho, el operador de matriz de mapa es también

56
00:03:50,540 --> 00:03:53,240
interesante desde la perspectiva de los observables,

57
00:03:53,240 --> 00:03:55,910
porque un observable como usted vio,

58
00:03:55,910 --> 00:03:58,950
también puede ser visto como una matriz,

59
00:03:58,950 --> 00:04:00,805
un flujo de valores,

60
00:04:00,805 --> 00:04:02,330
que se puede ver como una matriz.

61
00:04:02,330 --> 00:04:05,560
Entonces, el operador de mapa también se puede usar en observables.

62
00:04:05,560 --> 00:04:11,935
Pero en este momento, lo estoy usando simplemente como un operador de matriz JavaScript.

63
00:04:11,935 --> 00:04:13,660
Guardemos los cambios.

64
00:04:13,660 --> 00:04:20,815
Ahora, iremos al componente de detalle de Dish y luego actualizaremos el componente de detalle de Dish.

65
00:04:20,815 --> 00:04:23,129
Ahora, dentro del componente de detalle de Dish,

66
00:04:23,129 --> 00:04:24,790
junto con el Dish,

67
00:04:24,790 --> 00:04:29,940
voy a declarar una variable llamada DISHIDs,

68
00:04:29,940 --> 00:04:32,755
que es una matriz de cadena.

69
00:04:32,755 --> 00:04:36,470
Este DISIDs almacenará todos los ID de

70
00:04:36,470 --> 00:04:42,225
todos los platos que están en mi colección de platos en mi menú.

71
00:04:42,225 --> 00:04:45,410
Entonces, también tendré

72
00:04:45,640 --> 00:04:53,490
dos variables más llamadas anterior y siguiente de la cadena de tipo.

73
00:04:53,490 --> 00:04:55,215
Ahora, ¿por qué los necesito?

74
00:04:55,215 --> 00:04:56,980
Eso se volverá un poco más claro,

75
00:04:56,980 --> 00:04:58,790
una vez que implementes la vista,

76
00:04:58,790 --> 00:05:00,560
donde voy a hacer uso de esto.

77
00:05:00,560 --> 00:05:04,480
Ahora, lo que haré aquí es que,

78
00:05:04,480 --> 00:05:10,610
dentro de mi ngInit anterior,

79
00:05:10,610 --> 00:05:18,800
dejamos que id sea igual a plus this route.snapshot params ID.

80
00:05:18,800 --> 00:05:22,565
Cuando hice esto en el ejercicio anterior,

81
00:05:22,565 --> 00:05:28,580
no te expliqué qué qué estaba haciendo la instantánea y por qué lo estamos haciendo de esta manera?

82
00:05:28,580 --> 00:05:31,490
Debido a que necesitabas entender observables,

83
00:05:31,490 --> 00:05:34,060
antes de entender lo que significa la instantánea.

84
00:05:34,060 --> 00:05:43,940
Ahora, en Angular, el servicio de ruta activado proporciona un conjunto de observables.

85
00:05:43,940 --> 00:05:46,775
Uno de los observables se llama params.

86
00:05:46,775 --> 00:05:48,860
Lo que nos proporciona este parámetro,

87
00:05:48,860 --> 00:05:56,030
es una forma de obtener los valores de parámetro dentro de mi URL.

88
00:05:56,030 --> 00:06:00,170
Por lo tanto, vio que cuando introdujo los parámetros de ruta,

89
00:06:00,170 --> 00:06:03,605
introdujo uno de los parámetros de ruta como ID de dos puntos.

90
00:06:03,605 --> 00:06:07,590
Ese ID de dos puntos queda disponible como observable.

91
00:06:07,590 --> 00:06:10,330
Entonces, cada vez que cambia ese valor,

92
00:06:10,330 --> 00:06:15,745
puede observar cambios en ese valor y luego tomar las medidas correspondientes.

93
00:06:15,745 --> 00:06:21,010
Pero, antes cuando implementamos el componente de detalle del plato,

94
00:06:21,010 --> 00:06:22,825
no sabíamos acerca de observables.

95
00:06:22,825 --> 00:06:26,200
Entonces, no pude explicar lo que estaba haciendo la instantánea en ese momento.

96
00:06:26,200 --> 00:06:30,460
Ahora, déjame volver atrás y explicar exactamente lo que hace la instantánea.

97
00:06:30,460 --> 00:06:32,870
Cuando usamos esto como instantánea aquí,

98
00:06:32,870 --> 00:06:34,250
lo que estamos haciendo es,

99
00:06:34,250 --> 00:06:37,580
estamos tomando una instantánea de

100
00:06:37,580 --> 00:06:40,250
el servicio de ruta y luego estamos obteniendo

101
00:06:40,250 --> 00:06:43,605
el parámetro observable en ese punto particular de tiempo.

102
00:06:43,605 --> 00:06:46,310
El valor de los parámetros en ese punto particular de

103
00:06:46,310 --> 00:06:49,340
tiempo y luego hacer uso de él dentro de nuestra aplicación.

104
00:06:49,340 --> 00:06:51,730
Aunque esa no es la forma ideal de hacerlo.

105
00:06:51,730 --> 00:06:55,010
En su lugar, hagamos uso del

106
00:06:55,010 --> 00:06:59,990
observable directamente y luego respondamos cada vez que ese cambio observable.

107
00:06:59,990 --> 00:07:04,650
Entonces, ¿cómo actualizamos este código para hacer uso de lo observable directamente?

108
00:07:04,650 --> 00:07:08,030
Entonces, lo que nos damos cuenta es que desde el servicio de ruta activado,

109
00:07:08,030 --> 00:07:10,390
tenemos los parámetros observables disponibles para nosotros.

110
00:07:10,390 --> 00:07:13,070
Por lo tanto, haremos uso de los parámetros observables y

111
00:07:13,070 --> 00:07:16,755
en cualquier momento que haya un cambio en donde los parámetros observables,

112
00:07:16,755 --> 00:07:22,750
podemos iniciar un cambio dentro de nuestro componente DishDetail.

113
00:07:22,750 --> 00:07:25,820
Permítanme ilustrar cómo vamos a hacer uso de

114
00:07:25,820 --> 00:07:28,935
los parámetros observables mediante la actualización de este código.

115
00:07:28,935 --> 00:07:30,735
Así que, yendo a este código,

116
00:07:30,735 --> 00:07:32,630
lo que voy a hacer ahora,

117
00:07:32,630 --> 00:07:37,615
es que voy a cambiar esto en decir,

118
00:07:37,615 --> 00:07:42,950
«Tengo esta ruta y de esta ruta,

119
00:07:42,950 --> 00:07:45,640
ya tengo los params disponibles.»

120
00:07:45,640 --> 00:07:50,030
Entonces, voy a eliminar la instantánea y uso los parámetros.

121
00:07:50,030 --> 00:07:52,060
Entonces, con este parámetro,

122
00:07:52,060 --> 00:08:00,410
lo que tengo ahora es el acceso a los parámetros observables.

123
00:08:00,410 --> 00:08:03,235
Ahora, ya que tenemos este parámetro observable,

124
00:08:03,235 --> 00:08:09,545
voy a usar un operador en este parámetro observable y luego lo modifiqué.

125
00:08:09,545 --> 00:08:17,275
Entonces, el operador que voy a usar se llama operador SwitchMap.

126
00:08:17,275 --> 00:08:21,050
El operador SwitchMap me permite

127
00:08:21,050 --> 00:08:26,230
hacer uso de los parámetros observables y ves la línea roja Squiggly que significa,

128
00:08:26,230 --> 00:08:31,590
que necesito importar el SwitchMap observable aquí.

129
00:08:31,590 --> 00:08:34,320
Entonces, iré a

130
00:08:34,320 --> 00:08:39,660
mis entradas aquí y

131
00:08:39,660 --> 00:08:45,880
luego ingresaré rxjs y operador.

132
00:08:49,640 --> 00:08:52,710
Entonces, de los parámetros observables,

133
00:08:52,710 --> 00:08:57,740
obtengo parámetros que son del tipo Params.

134
00:08:57,740 --> 00:09:05,700
Por lo tanto, recuerde que importamos los parámetros de la biblioteca del enrutador aquí.

135
00:09:05,700 --> 00:09:07,520
Entonces, imploramos a params aquí,

136
00:09:07,520 --> 00:09:12,289
de la biblioteca del router y también importamos el servicio de ruta de activación aquí,

137
00:09:12,289 --> 00:09:15,800
y luego los hicimos disponibles dentro de nuestro constructor aquí,

138
00:09:15,800 --> 00:09:18,225
a través de la ruta del activador.

139
00:09:18,225 --> 00:09:25,055
Entonces, es por eso que somos capaces de hacer este parámetro de ruta para obtener los parámetros observables.

140
00:09:25,055 --> 00:09:27,740
Voy a usar el operador SwitchMap en los parámetros

141
00:09:27,740 --> 00:09:34,049
observables y luego cuando obtengo los parámetros observables,

142
00:09:34,049 --> 00:09:44,880
lo que voy a hacer es tomar eso y luego decir, este DishService.

143
00:09:45,030 --> 00:09:54,370
getDish, y luego este ID ahora debe obtenerse usando los parámetros.

144
00:09:54,370 --> 00:09:58,600
Ves el parámetro que tenemos allí.

145
00:09:58,600 --> 00:10:04,765
De los parámetros, diré entre paréntesis ID.

146
00:10:04,765 --> 00:10:11,490
Entonces, lo que sucede es que cada vez que los parámetros observables cambian el valor,

147
00:10:11,490 --> 00:10:17,680
, lo que significa que el parámetro de ruta cambia el valor, inmediatamente,

148
00:10:17,680 --> 00:10:20,900
el operador del mapa del interruptor tomará el valor de parámetros,

149
00:10:20,900 --> 00:10:25,320
y luego hará un GetDish desde mi DishService.

150
00:10:25,320 --> 00:10:27,060
Por lo tanto, esto se iniciaría automáticamente,

151
00:10:27,060 --> 00:10:31,280
y esto estará disponible como el otro

152
00:10:31,280 --> 00:10:36,900
observable que se emite haciendo este operador de mapa de conmutación en este observable.

153
00:10:36,900 --> 00:10:41,580
Entonces, estamos creando un nuevo observable que es GetDish,

154
00:10:41,580 --> 00:10:45,820
que va a devolver el objeto plato aquí.

155
00:10:45,820 --> 00:10:49,285
Ahora, una vez que tengamos el GetDish allí,

156
00:10:49,285 --> 00:10:53,350
entonces eso ahora puede estar disponible como observable.

157
00:10:53,350 --> 00:10:57,700
Acabo de suscribirme a ese observable usando la suscripción aquí.

158
00:10:57,700 --> 00:10:59,815
Entonces, allí obtengo el plato.

159
00:10:59,815 --> 00:11:03,930
Este plato se obtiene haciendo este GetDish aquí.

160
00:11:03,930 --> 00:11:08,790
Ese plato, entonces puedo hacer uso para mapear en

161
00:11:08,790 --> 00:11:14,025
mi variable plato que he declarado anteriormente.

162
00:11:14,025 --> 00:11:17,790
Así que, de esta manera, mi plato ahora se actualiza.

163
00:11:17,790 --> 00:11:20,775
Así que, cada vez que los parámetros observables cambios,

164
00:11:20,775 --> 00:11:24,210
mi plato se actualizará al nuevo plato.

165
00:11:24,210 --> 00:11:27,590
Entonces, note cómo estoy tomando uno observable, los parámetros observables,

166
00:11:27,590 --> 00:11:33,050
y luego estoy mapeando los parámetros observables en otro observable que es básicamente

167
00:11:33,050 --> 00:11:40,675
ir a buscar el valor del plato de mi DishService,

168
00:11:40,675 --> 00:11:42,955
y luego hacer que esté disponible como observable.

169
00:11:42,955 --> 00:11:48,010
Luego, me suscribo a ese observable aquí, y luego,

170
00:11:48,010 --> 00:11:49,780
obtengo el valor del plato aquí,

171
00:11:49,780 --> 00:11:52,720
y luego estoy mapeando el valor del plato o más bien

172
00:11:52,720 --> 00:11:56,795
haciendo que la variable del plato sea igual al valor del plato aquí.

173
00:11:56,795 --> 00:12:00,415
Observe cómo al usar los observables,

174
00:12:00,415 --> 00:12:04,865
ahora puede tomar uno observable y luego asignarlo a otro observable.

175
00:12:04,865 --> 00:12:06,730
¿Por qué esto es interesante?

176
00:12:06,730 --> 00:12:12,680
Si ahora, tengo una forma de modificar ese parámetro de ruta,

177
00:12:12,680 --> 00:12:19,005
entonces podré cambiar entre diferentes platos y ver los diferentes platos.

178
00:12:19,005 --> 00:12:22,100
Desafortunadamente, no tengo eso en su lugar.

179
00:12:22,100 --> 00:12:25,735
Entonces, necesito modificar los componentes del plato para permitirme hacer eso.

180
00:12:25,735 --> 00:12:31,545
Ahora, aquí es donde incluiré un par de botones en mi vista que cuando haga clic,

181
00:12:31,545 --> 00:12:36,390
podré navegar a través de mi lista de platos.

182
00:12:36,390 --> 00:12:38,960
Ahora, para poder navegar a través de mi lista de platos,

183
00:12:38,960 --> 00:12:42,005
necesito saber el conjunto de todos mis platos,

184
00:12:42,005 --> 00:12:45,525
o al menos necesito saber las identificaciones de todos mis platos.

185
00:12:45,525 --> 00:12:51,410
Esa es la razón por la que uso este DISIDs aquí, ¿de acuerdo?

186
00:12:51,410 --> 00:12:58,800
Entonces, ahora ves por qué incluí el método DISHIDs en mi DishService.

187
00:12:58,800 --> 00:13:01,455
Así que, entonces empiezo.

188
00:13:01,455 --> 00:13:05,830
Voy a obtener primero

189
00:13:05,830 --> 00:13:10,510
los DishID por

190
00:13:10,510 --> 00:13:16,970
llamando al método DishService,

191
00:13:17,070 --> 00:13:22,570
getDishIDs en ese punto.

192
00:13:22,570 --> 00:13:25,735
Todavía estoy trabajando con la antigua forma de hacer las cosas.

193
00:13:25,735 --> 00:13:34,795
Tengo que darme cuenta de que este GetDisHIDs está enviando en observable.

194
00:13:34,795 --> 00:13:39,365
Entonces, necesito suscribirme a ese observable.

195
00:13:39,365 --> 00:13:43,910
Ves cómo necesitas cambiar tu forma de pensar cuando

196
00:13:43,910 --> 00:13:48,340
estás operando con las variables aquí.

197
00:13:48,340 --> 00:13:52,840
Entonces, diríamos DISHIDs subscribe,

198
00:13:52,840 --> 00:13:54,935
y dentro de la suscripción,

199
00:13:54,935 --> 00:14:00,990
obtendremos el parámetro que es una matriz de cadenas,

200
00:14:00,990 --> 00:14:04,170
y luego diría justo allí,

201
00:14:04,170 --> 00:14:09,970
DISHIDs será igual a DISHIDs.

202
00:14:09,970 --> 00:14:14,085
Mira, lo fácil que es

203
00:14:14,085 --> 00:14:18,510
cambiar tu forma de pensar cuando quieres lidiar con un observable.

204
00:14:18,510 --> 00:14:20,895
Entonces, GetDishids está enviando un observable,

205
00:14:20,895 --> 00:14:26,790
y me suscribo a ese observable y luego tengo los Dishids aquí disponibles.

206
00:14:26,790 --> 00:14:29,130
Entonces, también suscribiéndose al parámetro.

207
00:14:29,130 --> 00:14:31,500
Si puedo cambiar mi parámetro, valor

208
00:14:31,500 --> 00:14:35,340
parámetro ruta valor dentro de mi código,

209
00:14:35,340 --> 00:14:38,300
entonces podré navegar entre los platos.

210
00:14:38,300 --> 00:14:41,240
Entonces, implementemos esa parte.

211
00:14:41,240 --> 00:14:43,810
Esto se está poniendo interesante.

212
00:14:43,810 --> 00:14:47,515
Entonces, para permitirme hacer eso,

213
00:14:47,515 --> 00:14:53,190
así que introduciré otro método aquí llamado setPrevNext,

214
00:14:55,770 --> 00:15:03,480
y a esto, enviaré un parámetro dishID.

215
00:15:03,480 --> 00:15:06,295
Ahora, dado mi actual DisHID,

216
00:15:06,295 --> 00:15:11,355
quería poder encontrar el anterior y el siguiente DisHID para poder implementar

217
00:15:11,355 --> 00:15:17,545
mi navegación entre los platos dentro de mi componente dishdetail.

218
00:15:17,545 --> 00:15:22,635
Entonces, esa es la razón por la que declaré el prev y el siguiente.

219
00:15:22,635 --> 00:15:25,555
Ahora, necesito poder inicializar estos dos valores.

220
00:15:25,555 --> 00:15:28,650
Todo lo que sé ahora es mi disID actual.

221
00:15:28,650 --> 00:15:30,610
Entonces, usando el DisHID actual,

222
00:15:30,610 --> 00:15:34,265
quiero poder encontrar el anterior y el siguiente DisHID.

223
00:15:34,265 --> 00:15:36,080
Entonces, en este método,

224
00:15:36,080 --> 00:15:40,255
voy a hacer el anterior y el siguiente DISHID.

225
00:15:40,255 --> 00:15:42,160
Así que, aquí voy a decir,

226
00:15:42,160 --> 00:15:50,200
dejar índice igual a este DISHID.

227
00:15:50,200 --> 00:15:52,900
Ahora, sólo sé la ID de mi plato,

228
00:15:52,900 --> 00:15:55,360
pero la ID de mi plato no me da todo.

229
00:15:55,360 --> 00:16:00,980
Necesito poder encontrar el plato en esta matriz de ID,

230
00:16:00,980 --> 00:16:06,510
, así que es por eso que estoy diciendo esto dishID e indexOf.

231
00:16:06,510 --> 00:16:13,640
Debe conocer el operador IndexOf en una matriz de JavaScript.

232
00:16:13,640 --> 00:16:20,935
El operador indexOf toma un valor y luego encuentra el índice de ese valor en la matriz.

233
00:16:20,935 --> 00:16:27,605
Entonces, indexOf y el parámetro aquí,

234
00:16:27,605 --> 00:16:29,945
daré es el dishID,

235
00:16:29,945 --> 00:16:34,765
el dishID que obtendré en poco tiempo.

236
00:16:34,765 --> 00:16:38,765
Ahora, una vez que obtengo el índice de este valor actual,

237
00:16:38,765 --> 00:16:42,385
puedo mapear

238
00:16:42,385 --> 00:16:49,420
los dos DISHID anteriores.

239
00:16:49,420 --> 00:16:59,080
Entonces, aquí es donde

240
00:16:59,080 --> 00:17:08,980
haré un poco de código complicado aquí que me permitirá envolver cuando lo esté.

241
00:17:08,980 --> 00:17:15,030
Por lo tanto, observe que esta matriz DISHIDs contiene un cierto número de valores allí.

242
00:17:15,030 --> 00:17:20,270
Si mi valor actual de mi DishID es el primer elemento,

243
00:17:20,270 --> 00:17:24,565
entonces el valor anterior será el elemento indexado zeroth en mi matriz.

244
00:17:24,565 --> 00:17:26,590
Pero si mi valor actual es el elemento zeroth,

245
00:17:26,590 --> 00:17:28,235
el primer elemento en mi matriz,

246
00:17:28,235 --> 00:17:32,530
entonces quiero envolver para obtener el último elemento en mi matriz.

247
00:17:32,530 --> 00:17:36,770
Entonces, aquí es donde hago uso del operador de módulo con

248
00:17:36,770 --> 00:17:42,235
alguna forma matemática de envolver las cosas.

249
00:17:42,235 --> 00:17:44,275
Entonces, diría que este DISHID

250
00:17:44,275 --> 00:18:14,500
más índice menos uno, y modula la longitud de este DISHID.

251
00:18:14,500 --> 00:18:15,925
Así que, lo que estoy haciendo es,

252
00:18:15,925 --> 00:18:19,590
el valor anterior será el índice actual,

253
00:18:19,590 --> 00:18:21,735
índice del valor actual,

254
00:18:21,735 --> 00:18:25,935
más la longitud de los platos menos uno.

255
00:18:25,935 --> 00:18:27,815
Ahora, si el índice es uno, el índice

256
00:18:27,815 --> 00:18:29,585
menos uno me dará cero.

257
00:18:29,585 --> 00:18:30,680
Si el índice es cero, el índice

258
00:18:30,680 --> 00:18:32,670
menos uno me dará menos uno,

259
00:18:32,670 --> 00:18:34,210
pero eso no es lo que quiero.

260
00:18:34,210 --> 00:18:38,190
Quiero envolver y obtener la longitud de DisHID menos uno.

261
00:18:38,190 --> 00:18:41,870
Entonces, es por eso que estoy incluyendo esto allí,

262
00:18:41,870 --> 00:18:44,995
y luego haciendo un módulo con los DISHID.

263
00:18:44,995 --> 00:18:47,660
Entonces, cuando el índice sea cero,

264
00:18:47,660 --> 00:18:51,915
me envolveré para obtener el último elemento en mi matriz.

265
00:18:51,915 --> 00:18:56,965
Entonces, así es como inicializo el valor anterior.

266
00:18:56,965 --> 00:18:59,120
Entonces, el siguiente valor,

267
00:18:59,120 --> 00:19:02,700
usaré el mismo enfoque,

268
00:19:02,770 --> 00:19:08,205
pero terminaré diciendo índice más uno.

269
00:19:08,205 --> 00:19:11,780
Entonces, si actualmente estoy en el último elemento de la matriz,

270
00:19:11,780 --> 00:19:14,200
entonces quiero envolver a cero.

271
00:19:14,200 --> 00:19:16,715
Entonces, esa es la otra parte de lo que estoy haciendo.

272
00:19:16,715 --> 00:19:19,200
Entonces, allí, estoy configurando el anterior y el siguiente.

273
00:19:19,200 --> 00:19:21,795
Entonces, ¿cuándo debería establecer el anterior y el siguiente?

274
00:19:21,795 --> 00:19:23,965
Cada vez que cambie mi plato,

275
00:19:23,965 --> 00:19:27,630
necesito poder iniciar una llamada a esto.

276
00:19:27,630 --> 00:19:30,590
Ahora, ¿dónde estoy cambiando mi valor de plato?

277
00:19:30,590 --> 00:19:34,365
Mirando hacia atrás en la suscripción aquí,

278
00:19:34,365 --> 00:19:35,905
nota que justo allí,

279
00:19:35,905 --> 00:19:40,180
estás cambiando tu plato cada vez que nuestro parámetro cambia.

280
00:19:40,180 --> 00:19:42,035
Así que, en ese punto,

281
00:19:42,035 --> 00:19:45,495
quiero restablecer mi valor anterior y siguiente.

282
00:19:45,495 --> 00:19:51,940
Entonces, voy a cambiar esto en un bloque de código aquí.

283
00:19:51,940 --> 00:19:57,250
Entonces, diría que este setPrevNext,

284
00:19:57,250 --> 00:20:02,170
y luego el parámetro sería dishID.

285
00:20:04,370 --> 00:20:07,970
Eso es todo. Así que, con este cambio,

286
00:20:07,970 --> 00:20:11,155
lo que sucede es cada vez que mi plato se actualiza,

287
00:20:11,155 --> 00:20:17,085
actualizaré el anterior y el siguiente también correspondientemente desde aquí.

288
00:20:17,085 --> 00:20:19,605
Así que, con este pequeño cambio,

289
00:20:19,605 --> 00:20:23,150
mi DishID será el plato actual.

290
00:20:23,150 --> 00:20:25,530
El anterior apuntará al plato anterior,

291
00:20:25,530 --> 00:20:28,690
y el siguiente será apuntado al siguiente DisHID.

292
00:20:28,690 --> 00:20:31,565
Por lo tanto, tengo los tres que necesito.

293
00:20:31,565 --> 00:20:37,460
Ahora, puedo hacer uso de estos tres valores para implementar la forma de navegar

294
00:20:37,460 --> 00:20:43,325
entre los platos en mi plantilla incluyendo un par de botones en mi plantilla.

295
00:20:43,325 --> 00:20:48,775
Así que, vamos a la plantilla de componentes dishdetail,

296
00:20:48,775 --> 00:20:53,569
y luego incluir un par de botones que me permite navegar entre los platos.

297
00:20:53,569 --> 00:20:58,535
yendo al componente de detalle del plato mientras estoy aquí,

298
00:20:58,535 --> 00:21:06,150
déjame tomar este nGIF de esta tarjeta y luego moverlo al div allí arriba.

299
00:21:06,150 --> 00:21:08,445
Quiero ocultar todo el div,

300
00:21:08,445 --> 00:21:10,850
cuando mi plato no es actualmente defecto,

301
00:21:10,850 --> 00:21:13,515
de manera similar para los comentarios también.

302
00:21:13,515 --> 00:21:16,440
Encuentro que esto es un poco irritante

303
00:21:16,440 --> 00:21:19,700
cuando se está obteniendo la información de mi plato del servidor.

304
00:21:19,700 --> 00:21:24,945
Entonces, voy a hacer este cambio tanto para los dos divs que

305
00:21:24,945 --> 00:21:32,810
uno mostrando los comentarios y el otro mostrando los detalles del plato en la tarjeta.

306
00:21:32,810 --> 00:21:35,170
Con estas dos actualizaciones,

307
00:21:35,170 --> 00:21:37,210
dentro de mis acciones de tarjeta,

308
00:21:37,210 --> 00:21:38,605
voy a incluir

309
00:21:38,605 --> 00:21:49,165
un botón más de tipo de botón obviamente y este botón,

310
00:21:49,165 --> 00:21:55,165
incluiré el routerLink.

311
00:21:55,165 --> 00:21:57,320
En el momento en que ves el enlace del router,

312
00:21:57,320 --> 00:21:58,775
inmediatamente dices, «Oh,

313
00:21:58,775 --> 00:22:00,620
sé lo que estás tratando de hacer.

314
00:22:00,620 --> 00:22:04,890
Estás tratando de convertir este botón para poder navegar entre

315
00:22:04,890 --> 00:22:11,720
los diferentes componentes dentro de mi servicio.»

316
00:22:11,720 --> 00:22:14,000
Entonces, para el routerLink,

317
00:22:14,000 --> 00:22:22,870
voy a proporcionar una matriz de valores y la matriz de valores para el routerLink,

318
00:22:22,870 --> 00:22:27,135
voy a hacer dishdetail.

319
00:22:27,135 --> 00:22:30,665
Además, la segunda parte.

320
00:22:30,665 --> 00:22:33,330
Mira, esta es la parte interesante.

321
00:22:33,330 --> 00:22:37,125
La segunda parte de esta matriz será anterior,

322
00:22:37,125 --> 00:22:43,090
que es la variable que declaré en mi componente.

323
00:22:43,090 --> 00:22:52,905
Entonces, con esto, este botón se convertirá en un enlace al plato anterior en mi lista de platos.

324
00:22:52,905 --> 00:22:55,615
Spiffy, ¿verdad?

325
00:22:55,615 --> 00:23:01,010
Entonces, con eso, ¿qué más?

326
00:23:02,010 --> 00:23:07,550
Déjame cerrar el botón aquí y luego dentro del botón,

327
00:23:07,550 --> 00:23:16,890
voy a utilizar un icono de fuente impresionante

328
00:23:22,360 --> 00:23:26,550
fa chevron-left.

329
00:23:32,670 --> 00:23:37,935
Así que, eso es todo. Este botón será un botón con un icono allí.

330
00:23:37,935 --> 00:23:40,605
Así que, ahora tenemos un botón aquí,

331
00:23:40,605 --> 00:23:43,465
también voy a incluir otro botón aquí.

332
00:23:43,465 --> 00:23:44,880
Antes de incluir el botón,

333
00:23:44,880 --> 00:23:50,330
voy a hacer span class flex-spacer,

334
00:23:50,330 --> 00:23:55,210
me viste usando el flex-spacer en uno de los ejercicios anteriores.

335
00:23:55,210 --> 00:23:56,855
Así que, ves lo que estoy haciendo,

336
00:23:56,855 --> 00:24:00,695
me estoy estirando para incluir el segundo botón.

337
00:24:00,695 --> 00:24:02,270
Entonces, para el segundo botón,

338
00:24:02,270 --> 00:24:05,040
solo voy a copiar este

339
00:24:06,780 --> 00:24:13,190
y luego pegarlo allí y luego actualizar este para decir anterior.

340
00:24:13,190 --> 00:24:16,730
En lugar de anterior, iré siguiente y luego

341
00:24:16,730 --> 00:24:23,335
fa-chevron-left a fa-chevron-right, y eso es todo.

342
00:24:23,335 --> 00:24:28,049
Guardemos los cambios en nuestros Componentes de Detalle de Dish,

343
00:24:28,049 --> 00:24:30,760
y también los archivos restantes.

344
00:24:30,760 --> 00:24:35,340
Después de esta actualización, vamos a ver lo que hace nuestra aplicación.

345
00:24:35,340 --> 00:24:38,065
Ir a mi aplicación en el navegador,

346
00:24:38,065 --> 00:24:40,500
vamos al componente Menu.

347
00:24:40,500 --> 00:24:46,240
Vemos el Menú y seleccionemos un elemento del Menú aquí.

348
00:24:46,240 --> 00:24:53,270
Por lo tanto, tenga en cuenta que ahora este elemento del plato del menú se muestra aquí.

349
00:24:53,270 --> 00:24:55,225
Aviso en la parte inferior,

350
00:24:55,225 --> 00:24:58,835
tenemos dos botones aquí, izquierda y derecha.

351
00:24:58,835 --> 00:25:01,440
Cuando hacemos clic en el botón izquierdo,

352
00:25:01,440 --> 00:25:08,875
nota cómo somos capaces de pasar al plato anterior en la lista de platos.

353
00:25:08,875 --> 00:25:15,515
Puedo seguir haciendo a la izquierda otra vez y seguir navegando hacia la izquierda y la derecha.

354
00:25:15,515 --> 00:25:17,980
Observe que cuando hago esto,

355
00:25:17,980 --> 00:25:22,655
mi vista real no se vuelve a cargar,

356
00:25:22,655 --> 00:25:25,190
en su lugar solo voy a buscar

357
00:25:25,190 --> 00:25:34,955
los datos relacionados con el plato del servicio y luego actualizar mi vista aquí.

358
00:25:34,955 --> 00:25:38,350
La razón por la que somos capaces de hacer esto es porque

359
00:25:38,350 --> 00:25:43,445
tenemos lo observable, los parámetros observables.

360
00:25:43,445 --> 00:25:45,890
Así que, cada vez que hago clic en estos dos,

361
00:25:45,890 --> 00:25:48,860
izquierda y derecha, los parámetros observables,

362
00:25:48,860 --> 00:25:56,620
nota cómo en este momento la dirección muestra detalle cero.

363
00:25:56,620 --> 00:25:58,315
Si hago clic a la derecha,

364
00:25:58,315 --> 00:26:02,925
entonces eso se actualizará de dishdetail cero a dishdetail uno.

365
00:26:02,925 --> 00:26:07,560
Ese cambio de parámetro, y eso hará que mi observable a

366
00:26:07,560 --> 00:26:12,245
vaya a buscar el nuevo plato del servicio de platos.

367
00:26:12,245 --> 00:26:14,980
Luego, se obtiene el nuevo plato,

368
00:26:14,980 --> 00:26:20,285
la variable plato en mi componente se actualiza,

369
00:26:20,285 --> 00:26:21,885
y cuando eso se actualiza,

370
00:26:21,885 --> 00:26:23,640
mi vista también se actualiza.

371
00:26:23,640 --> 00:26:28,185
Así que, note que estoy usando la misma vista,

372
00:26:28,185 --> 00:26:36,440
soy capaz de navegar entre los diversos platos que son parte de mi lista de platos.

373
00:26:36,440 --> 00:26:42,470
Esta es la parte interesante que puede obtener utilizando los parámetros

374
00:26:42,470 --> 00:26:49,250
observables desde activator.service dentro de su aplicación Angular.

375
00:26:49,250 --> 00:26:56,355
Interesante forma de hacer uso de cuentas observables nuestra aplicación Angular.

376
00:26:56,355 --> 00:26:59,640
Por supuesto, la forma en que lo he implementado,

377
00:26:59,640 --> 00:27:03,210
lo hice un poco de una forma artificial de hacer las cosas.

378
00:27:03,210 --> 00:27:07,965
Tuve que conseguir la lista de identificaciones de platos.

379
00:27:07,965 --> 00:27:12,760
Tuve que modificar el anterior y el siguiente y así sucesivamente.

380
00:27:12,760 --> 00:27:16,360
Si tuvieras una forma de obtener el

381
00:27:16,360 --> 00:27:20,000
anterior y el siguiente valor automáticamente de tu servicio,

382
00:27:20,000 --> 00:27:22,015
cada vez que buscas un plato,

383
00:27:22,015 --> 00:27:26,895
entonces la implementación de la puntuación será un poco más fácil.

384
00:27:26,895 --> 00:27:28,705
Ahora mismo no tenemos eso.

385
00:27:28,705 --> 00:27:33,430
Entonces, trabajé alrededor del problema porque solo quería ilustrar la forma

386
00:27:33,430 --> 00:27:38,855
de usar un observable como este dentro de su aplicación Angular.

387
00:27:38,855 --> 00:27:43,270
Si podemos implementar el servicio que devolverá el valor

388
00:27:43,270 --> 00:27:47,320
anterior y el siguiente cada vez que tengamos un plato,

389
00:27:47,320 --> 00:27:53,640
entonces todo este dolor de cabeza será mucho más simple resuelto.

390
00:27:53,640 --> 00:27:58,810
Vamos a posponer esa idea para una etapa posterior.

391
00:27:58,810 --> 00:28:01,930
Pero por el momento, ves cómo estamos haciendo

392
00:28:01,930 --> 00:28:05,250
uso de los parámetros observables con el fin de implementar

393
00:28:05,250 --> 00:28:12,605
una forma interesante de apoyar una nueva característica dentro de nuestra aplicación Angular.

394
00:28:12,605 --> 00:28:16,325
Esto completa este ejercicio.

395
00:28:16,325 --> 00:28:24,000
Este es un buen momento para que hagas un commit de git con el mensaje RXJS Parte dos.