1
00:00:03,680 --> 00:00:07,095
Ahora continuemos trabajando en

2
00:00:07,095 --> 00:00:12,080
la aplicación de una sola página que hemos estado desarrollando en nuestros ejercicios.

3
00:00:12,080 --> 00:00:16,480
Hasta ahora, hemos integrado el componente de inicio,

4
00:00:16,480 --> 00:00:23,610
el componente de menú y el componente de contacto en nuestra aplicación de una sola página.

5
00:00:23,610 --> 00:00:29,080
El componente de detalle de plato se está utilizando actualmente en la parte inferior del componente de menú.

6
00:00:29,080 --> 00:00:32,020
Así que, al hacer clic en cualquiera de los elementos del menú,

7
00:00:32,020 --> 00:00:35,450
los detalles del plato se muestran justo debajo en el menú.

8
00:00:35,450 --> 00:00:40,290
Ahora, vamos a aprovechar otro soporte que proporciona el módulo Router Angular,

9
00:00:40,290 --> 00:00:47,820
que nos permite definir una ruta con un parámetro incluido en la definición de ruta.

10
00:00:47,820 --> 00:00:52,520
De esta manera, podemos pasar información a otro componente,

11
00:00:52,520 --> 00:00:53,880
y luego desde allí,

12
00:00:53,880 --> 00:00:56,175
mostrar información en el otro componente.

13
00:00:56,175 --> 00:00:57,770
¿Cómo funciona esto?

14
00:00:57,770 --> 00:01:01,770
Aprendamos eso haciendo este ejercicio.

15
00:01:01,770 --> 00:01:04,755
Así que, volviendo a nuestra aplicación,

16
00:01:04,755 --> 00:01:08,140
en esta aplicación, cuando nos fijamos en el menú,

17
00:01:08,140 --> 00:01:10,205
al hacer clic en cualquier elemento del menú,

18
00:01:10,205 --> 00:01:15,920
los detalles del elemento seleccionado se muestran justo debajo en el menú.

19
00:01:15,920 --> 00:01:19,940
Ahora, me gustaría separar la vista de los detalles

20
00:01:19,940 --> 00:01:24,795
de este plato en particular en su propia vista separada.

21
00:01:24,795 --> 00:01:27,235
Cuando hago clic en cualquiera de estos,

22
00:01:27,235 --> 00:01:30,360
quiero ser capaz de mostrar los detalles del plato,

23
00:01:30,360 --> 00:01:34,780
específicamente en una vista en esta aplicación.

24
00:01:34,780 --> 00:01:39,235
Para lograr eso, vamos a aprovechar, como dije,

25
00:01:39,235 --> 00:01:43,985
con los parámetros de ruta para permitir que

26
00:01:43,985 --> 00:01:48,220
nosotros soportemos ese tipo de comportamiento en nuestra aplicación.

27
00:01:48,220 --> 00:01:50,050
¿Cómo hacemos eso?

28
00:01:50,050 --> 00:01:57,025
Vamos a hacer eso comenzando con la definición de una nueva ruta con un parámetro aquí.

29
00:01:57,025 --> 00:02:00,305
Para hacer uso del componente de detalle plato,

30
00:02:00,305 --> 00:02:02,455
vamos a ir a las rutas,

31
00:02:02,455 --> 00:02:06,850
y luego definir una nueva ruta tras menú aquí.

32
00:02:06,850 --> 00:02:10,010
Mire la forma en que se define la ruta aquí.

33
00:02:10,010 --> 00:02:16,595
Así que, esto es camino, detalle de la vajilla.

34
00:02:16,595 --> 00:02:20,225
Por lo tanto, este detalle del plato es parte del componente de detalle del plato.

35
00:02:20,225 --> 00:02:22,190
Por lo tanto, tiene su propia visión.

36
00:02:22,190 --> 00:02:25,330
Ahora, quiero poder navegar a esa vista,

37
00:02:25,330 --> 00:02:27,890
pero con un ID de parámetro,

38
00:02:27,890 --> 00:02:33,750
porque esta vista de detalle de plato podría mostrar cualquiera de los platos en mi menú.

39
00:02:33,750 --> 00:02:38,790
Por lo tanto, quiero poder mostrar un plato seleccionado en el detalle del plato.

40
00:02:38,790 --> 00:02:40,710
Ahora, ese es el plato seleccionado tendrá una ID,

41
00:02:40,710 --> 00:02:45,879
y quiero pasar esa ID a mi plato componentes detallados,

42
00:02:45,879 --> 00:02:50,025
para que pueda representar los detalles de ese plato en particular.

43
00:02:50,025 --> 00:02:53,480
Entonces, en el enrutador angular,

44
00:02:53,480 --> 00:02:59,150
admite pasar parámetros definiendo parámetros de ruta como este,

45
00:02:59,150 --> 00:03:02,220
en la definición del enrutador en sí.

46
00:03:02,220 --> 00:03:03,260
Entonces, dentro de la ruta,

47
00:03:03,260 --> 00:03:04,525
si digo dos puntos,

48
00:03:04,525 --> 00:03:10,050
para que dos puntos puedan ser seguidos por un nombre que actuará como un parámetro de ruta.

49
00:03:10,050 --> 00:03:14,650
Entonces, en este caso, voy a usar el nombre del parámetro como una ID.

50
00:03:14,650 --> 00:03:21,165
Este ID se refiere al ID del plato que ya hemos dado a cada uno de nuestros platos.

51
00:03:21,165 --> 00:03:27,055
Ahora, esto me llevará al componente de detalle del plato.

52
00:03:27,055 --> 00:03:35,040
Por lo tanto, añadiremos esta nueva ruta a nuestra definición de ruta angular aquí.

53
00:03:35,040 --> 00:03:36,565
Guarde los cambios.

54
00:03:36,565 --> 00:03:39,960
Ahora, en el componente de menú,

55
00:03:39,960 --> 00:03:45,805
así que cuando abro el archivo de plantilla de componentes de menú,

56
00:03:45,805 --> 00:03:47,470
en el componente de menú,

57
00:03:47,470 --> 00:03:50,350
estoy mostrando el plato en la parte inferior aquí.

58
00:03:50,350 --> 00:03:51,625
Entonces, no quiero hacer eso.

59
00:03:51,625 --> 00:03:57,335
Entonces, voy a eliminar esa parte de mi plantilla de componentes de menú.

60
00:03:57,335 --> 00:04:01,630
En cambio, lo que me doy cuenta es que justo ahí,

61
00:04:01,630 --> 00:04:05,015
soy capaz de acceder al plato en particular.

62
00:04:05,015 --> 00:04:07,680
Entonces, cuando se hace clic en el plato,

63
00:04:07,680 --> 00:04:10,080
en lugar de hacer este clic aquí,

64
00:04:10,080 --> 00:04:13,490
así que voy a eliminar este clic aquí, y en su lugar,

65
00:04:13,490 --> 00:04:23,940
voy a definir un nuevo parámetro aquí llamado routerLink.

66
00:04:25,790 --> 00:04:30,710
Verá el uso del routerLink aquí.

67
00:04:30,710 --> 00:04:37,460
Ahora, este routerLink toma valores que puede proporcionar en su plantilla de esta manera.

68
00:04:37,460 --> 00:04:42,190
Por lo tanto, puede suministrar eso como una matriz aquí.

69
00:04:42,190 --> 00:04:49,550
Dentro de la matriz, puede suministrar dos partes de una matriz.

70
00:04:49,550 --> 00:04:51,195
Así que, detalle de la vajilla.

71
00:04:51,195 --> 00:04:55,360
Entonces, viste que cuando definí la ruta, dije «/dishdetail/:id».

72
00:04:56,560 --> 00:05:03,320
Entonces, el enrutador angular pasará cualquier parámetro que suministre

73
00:05:03,320 --> 00:05:09,340
aquí como parte de la segunda parte de esa URL allí.

74
00:05:09,340 --> 00:05:11,700
Así que, ahora, junto con el detalle del plato,

75
00:05:11,700 --> 00:05:15,820
voy a construir mi routerLink usando detalle del plato,

76
00:05:15,820 --> 00:05:19,165
y también el ID del plato aquí.

77
00:05:19,165 --> 00:05:22,580
Por lo tanto, este ID plato se refiere al plato específico que tengo

78
00:05:22,580 --> 00:05:26,710
seleccionado de la variedad de platos aquí.

79
00:05:26,710 --> 00:05:27,950
Así que, ese ID plato,

80
00:05:27,950 --> 00:05:29,830
tengo acceso a él aquí.

81
00:05:29,830 --> 00:05:38,120
Entonces, voy a usar eso como la segunda parte dentro de esta matriz de parámetros,

82
00:05:38,120 --> 00:05:41,025
que voy a pasar para mi routerLink aquí.

83
00:05:41,025 --> 00:05:42,970
Así que, si lo defino así,

84
00:05:42,970 --> 00:05:48,270
entonces cuando haga clic en ese elemento en particular en mi menú,

85
00:05:48,270 --> 00:05:51,030
entonces ese detallado, el ID del plato,

86
00:05:51,030 --> 00:05:53,385
junto con este detalle,

87
00:05:53,385 --> 00:05:55,285
se pasará como el enlace del router.

88
00:05:55,285 --> 00:05:59,765
Por lo tanto, esa información ahora estará disponible a través de

89
00:05:59,765 --> 00:06:04,600
mis enrutadores angulares a mis componentes de detalle plato.

90
00:06:04,600 --> 00:06:09,850
Por lo tanto, el router permite que el componente de detalle del plato recupere este valor,

91
00:06:09,850 --> 00:06:15,060
ID del plato, de la ruta angular cuando se pasa esta información.

92
00:06:15,060 --> 00:06:16,880
¿Cómo lo hacemos? Para eso,

93
00:06:16,880 --> 00:06:22,670
tenemos que ir al componente de detalle del plato y arreglarlo para recibir esta información.

94
00:06:22,670 --> 00:06:27,945
Así que, después de realizar estos cambios en el componente de menú,

95
00:06:27,945 --> 00:06:34,090
vamos ahora a cambiar al componente de detalle del plato.

96
00:06:34,300 --> 00:06:37,610
Dentro del componente de detalle plato,

97
00:06:37,610 --> 00:06:39,950
ves que actualmente,

98
00:06:39,950 --> 00:06:43,670
estaba recibiendo el plato como una entrada aquí.

99
00:06:43,670 --> 00:06:46,655
Ya no voy a recibir los platos y la entrada.

100
00:06:46,655 --> 00:06:50,295
Por lo tanto, voy a dejar que como tal,

101
00:06:50,295 --> 00:06:51,910
como simplemente un plato.

102
00:06:51,910 --> 00:06:58,220
Ya no necesito la entrada porque no estoy pasando esta información usando el plato,

103
00:06:58,220 --> 00:07:01,625
entre corchetes que incluí en mi componente de menú.

104
00:07:01,625 --> 00:07:07,550
En su lugar, esta información acerca de los platos específicos que entran a través del enrutador angular.

105
00:07:07,550 --> 00:07:11,595
¿Cómo obtengo acceso a ese ID de plato?

106
00:07:11,595 --> 00:07:13,050
Así que, para hacer eso,

107
00:07:13,050 --> 00:07:14,870
voy aquí.

108
00:07:14,870 --> 00:07:24,720
En esta aplicación, voy a agregar dos importaciones más aquí,

109
00:07:24,720 --> 00:07:27,480
una de ellas llamada Params.

110
00:07:27,480 --> 00:07:30,560
Por lo tanto, este Params me da acceso a

111
00:07:30,560 --> 00:07:35,315
los parámetros del router que están disponibles cuando vengo.

112
00:07:35,315 --> 00:07:42,855
Entonces, esto es del enrutador angular, Params,

113
00:07:42,855 --> 00:07:51,510
y también otro que necesito es la Ubicación.

114
00:07:51,510 --> 00:07:57,710
Ubicación me permite rastrear la ubicación de

115
00:07:57,710 --> 00:08:04,060
mi página en el historial de mi navegador.

116
00:08:04,060 --> 00:08:11,185
Entonces, eso sería útil para mí navegar hacia atrás desde mi detalle de plato cuando lo necesite.

117
00:08:11,185 --> 00:08:14,440
Me verás usando eso un poco más tarde.

118
00:08:14,440 --> 00:08:19,255
Entonces, dos cosas que necesito importar: Params y Ubicación.

119
00:08:19,255 --> 00:08:23,799
Veremos cómo hacemos uso de estos dos en nuestra aplicación.

120
00:08:23,799 --> 00:08:25,430
Así que, junto con esto,

121
00:08:25,430 --> 00:08:29,420
entraremos y entraremos aquí, para el constructor,

122
00:08:29,420 --> 00:08:39,320
ahora notamos que el valor del plato ahora no está disponible desde mi componente de menú.

123
00:08:39,320 --> 00:08:43,650
Pero en su lugar, tengo que ir explícitamente y buscar esto del DishService.

124
00:08:43,650 --> 00:08:45,405
Por lo tanto, voy a importar

125
00:08:45,405 --> 00:08:56,020
the DishService también en mi componente de detalle de plato.

126
00:09:01,330 --> 00:09:03,960
DishService aquí.

127
00:09:03,960 --> 00:09:09,820
Entonces, esto me permitirá ir a buscar un plato específico del Servicio de Dish.

128
00:09:09,820 --> 00:09:11,930
Por lo tanto, recuerda que ya tenemos

129
00:09:11,930 --> 00:09:15,855
el método GetDish y el Servicio de Dish que podemos usar.

130
00:09:15,855 --> 00:09:20,320
Ahora, lo siguiente importante para nosotros es conseguir el id del plato.

131
00:09:20,320 --> 00:09:22,800
Ahora, ¿cómo podemos conseguir el id del plato.

132
00:09:22,800 --> 00:09:25,665
Entonces, aquí es donde en el constructor.

133
00:09:25,665 --> 00:09:29,075
Ahora, necesito que todos estos servicios estén disponibles,

134
00:09:29,075 --> 00:09:31,230
así que voy a decir Servicio de platos.

135
00:09:31,230 --> 00:09:46,250
Entonces, el otro es Ubicación.

136
00:09:46,270 --> 00:09:51,275
Por lo tanto, la ubicación es otro servicio que está disponible para mí.

137
00:09:51,275 --> 00:09:56,010
Entonces, ambos se usarán dentro de mi aplicación.

138
00:09:56,010 --> 00:09:59,325
Entonces, cuando este componente del plato es inicializado,

139
00:09:59,325 --> 00:10:01,890
entonces en este punto en el ngOnInit,

140
00:10:01,890 --> 00:10:08,490
puedo ir y buscar la información sobre el plato específico de los Params.

141
00:10:08,490 --> 00:10:13,120
Entonces, ¿cómo lo hacemos? Entonces, dejamos id.

142
00:10:13,120 --> 00:10:15,800
Entonces, aquí es donde voy a buscar la id,

143
00:10:15,800 --> 00:10:19,370
, así que diría más esto.

144
00:10:19,370 --> 00:10:23,760
También para obtener el valor de la ruta,

145
00:10:23,760 --> 00:10:30,565
necesito inyectar otro servicio llamado servicio ActivatedRoute.

146
00:10:30,565 --> 00:10:32,740
Eso es parte de los routers angulares.

147
00:10:32,740 --> 00:10:39,970
Así que este servicio ActivatedRoute me proporciona acceso a la ruta aquí.

148
00:10:39,970 --> 00:10:41,940
Así que, yo diría,

149
00:10:41,940 --> 00:10:47,770
, así que junto con el DishService también necesito definir una más llamada

150
00:10:47,770 --> 00:10:54,305
como ruta que sería el servicio ActivatedRoute aquí.

151
00:10:54,305 --> 00:10:56,890
Entonces, todos estos tres estarán disponibles para mí.

152
00:10:56,890 --> 00:11:00,265
Así que ahí mismo, puedo pedir

153
00:11:00,265 --> 00:11:10,840
esta ruta, Snapshot, Params.

154
00:11:10,840 --> 00:11:18,500
Este Params es una matriz a

155
00:11:18,500 --> 00:11:25,760
que puedo indexar usando el id como el valor, por lo que Params id.

156
00:11:25,760 --> 00:11:30,340
Esto me obtiene el id del parámetro.

157
00:11:30,340 --> 00:11:34,750
Entonces, cuando defino esta URL,

158
00:11:34,750 --> 00:11:41,070
la URL para esto se definiría como Dishdetail.

159
00:11:41,070 --> 00:11:43,320
Por ejemplo, DishDetail 0,

160
00:11:43,320 --> 00:11:47,760
DishDetail 1, DishDetail 2, etc.

161
00:11:47,760 --> 00:11:54,060
Entonces, así es como las URL de estos componentes se van a definir allí.

162
00:11:54,060 --> 00:11:56,520
Entonces, ese valor que voy a buscar aquí.

163
00:11:56,520 --> 00:11:59,950
Ahora, una vez que me haga cargo de la idea del plato, entonces puedo decir,

164
00:11:59,950 --> 00:12:08,125
este plato es igual a DishService

165
00:12:08,125 --> 00:12:17,915
y obtener el plato y getDish tomará el id como el parámetro aquí.

166
00:12:17,915 --> 00:12:22,825
Entonces, con esto, cuando hago clic en un plato en mi componente de menú,

167
00:12:22,825 --> 00:12:26,410
ese enlace que tengo el enlace del enrutador que tengo configurado allí,

168
00:12:26,410 --> 00:12:31,770
pasará el id del plato a mi Router como Router Parameter,

169
00:12:31,770 --> 00:12:34,525
y que estará disponible para mí en

170
00:12:34,525 --> 00:12:40,380
mi componente DishDetail accediendo al ActivatedRoute servicio aquí.

171
00:12:40,380 --> 00:12:42,515
Entonces, una vez que lo consiga,

172
00:12:42,515 --> 00:12:46,820
entonces puedo usar ese valor para consultar el plato aquí.

173
00:12:46,820 --> 00:12:50,630
Ahora bien, esta no es la forma completa de hacer las cosas.

174
00:12:50,630 --> 00:12:53,080
Más adelante en el siguiente módulo,

175
00:12:53,080 --> 00:12:56,120
vamos a usar algo llamado JavaScript reactivo.

176
00:12:56,120 --> 00:12:59,640
Entonces, en ese momento, volveré para redefinir esto en

177
00:12:59,640 --> 00:13:04,870
de una manera diferente para que mi componente DishDetail pueda realizar un seguimiento de

178
00:13:04,870 --> 00:13:09,120
cualquier cambio que realice en mi URL y

179
00:13:09,120 --> 00:13:14,515
cambie automáticamente la información que está siendo mostrada por este componente.

180
00:13:14,515 --> 00:13:19,445
Llegaremos a eso en uno de los ejercicios posteriores en el siguiente módulo,

181
00:13:19,445 --> 00:13:23,890
pero esto funciona bien por el momento, así que vamos a usar esto.

182
00:13:23,890 --> 00:13:27,070
Además, ahora cuando voy a los detalles del plato

183
00:13:27,070 --> 00:13:30,335
quiero poder volver al menú del plato.

184
00:13:30,335 --> 00:13:36,135
Por lo tanto, voy a añadir un botón Atrás en mi tarjeta un botón Atrás en mi tarjeta,

185
00:13:36,135 --> 00:13:41,905
que cuando se pulsa me llevará de vuelta a la ubicación anterior en mi navegador.

186
00:13:41,905 --> 00:13:48,230
Entonces, para hacer eso, voy a agregar un método aquí llamado GoBack,

187
00:13:50,020 --> 00:13:57,280
que esencialmente hará uso

188
00:13:57,280 --> 00:14:03,735
del servicio de ubicación que he incluido aquí.

189
00:14:03,735 --> 00:14:09,300
El servicio de ubicación proporciona un método llamado Atrás que me permite volver

190
00:14:09,300 --> 00:14:15,000
al elemento anterior en el historial del navegador.

191
00:14:15,000 --> 00:14:19,890
Así que, de esa manera, voy a navegar de nuevo al menú desde los detalles aquí.

192
00:14:19,890 --> 00:14:22,430
Entonces, este método GoBack se agrega aquí.

193
00:14:22,430 --> 00:14:28,160
Ahora, tenemos que ir y arreglar el componente DishDetail aquí.

194
00:14:28,160 --> 00:14:32,390
Por lo tanto, en el archivo de plantilla de componentes DishDetail,

195
00:14:32,390 --> 00:14:36,950
aquí tenemos dos botones que son el botón Me gusta y Compartir.

196
00:14:36,950 --> 00:14:40,040
Voy a añadir un botón más aquí.

197
00:14:42,920 --> 00:14:47,155
Para este botón, agregaría,

198
00:14:47,155 --> 00:14:49,220
si se hace clic en este botón,

199
00:14:49,220 --> 00:14:55,330
esto dará como resultado una llamada al método GoBack que

200
00:14:55,330 --> 00:15:03,430
acabo de agregar a mi DishDetail component.tsfile.

201
00:15:03,430 --> 00:15:10,555
Entonces, esto sería un botón Atrás allí.

202
00:15:10,555 --> 00:15:12,625
Mientras estamos en ello,

203
00:15:12,625 --> 00:15:16,540
también podríamos arreglar los enlaces de componentes de Pie de página.

204
00:15:16,540 --> 00:15:22,645
Así que, yendo al footercomponent.htmlfile en la parte inferior aquí donde tenemos estos enlaces,

205
00:15:22,645 --> 00:15:29,785
voy a añadir en el routerLink aquí con

206
00:15:29,785 --> 00:15:38,110
el parámetro home para el primero,

207
00:15:38,110 --> 00:15:47,390
y luego menú para el segundo,

208
00:15:51,240 --> 00:16:00,330
y póngase en contacto con nosotros para el tercero en el pie de página aquí.

209
00:16:00,330 --> 00:16:02,710
Guardemos los cambios.

210
00:16:02,710 --> 00:16:04,785
Ir a su aplicación,

211
00:16:04,785 --> 00:16:06,615
si ahora hace clic en el menú,

212
00:16:06,615 --> 00:16:09,195
los elementos del menú se muestran aquí.

213
00:16:09,195 --> 00:16:11,895
Si hacemos clic en cualquiera de los elementos del menú,

214
00:16:11,895 --> 00:16:20,585
notarías que los detalles del plato se muestran en una vista separada aquí.

215
00:16:20,585 --> 00:16:22,900
Estos detalles, como puede ver,

216
00:16:22,900 --> 00:16:26,450
esto es exactamente lo que el componente DishDetail estaba mostrando anteriormente,

217
00:16:26,450 --> 00:16:29,620
pero en la parte inferior del menú en el componente de menú,

218
00:16:29,620 --> 00:16:33,260
ahora tenemos que mostrarlo en una vista separada.

219
00:16:33,260 --> 00:16:35,760
Ahora, este componente DishDetail,

220
00:16:35,760 --> 00:16:39,290
ahora puede volver al menú haciendo clic en el botón Atrás.

221
00:16:39,290 --> 00:16:40,670
Así que, cuando haces clic en el botón Atrás,

222
00:16:40,670 --> 00:16:41,690
estás de vuelta en el menú.

223
00:16:41,690 --> 00:16:43,490
Cuando haces clic en otro elemento,

224
00:16:43,490 --> 00:16:47,575
ves que los detalles de ese elemento en particular se muestran aquí,

225
00:16:47,575 --> 00:16:51,560
de manera similar para el tercero también y luego puedes volver atrás.

226
00:16:51,560 --> 00:16:54,645
Ahora, al hacer clic en cualquiera de estos elementos,

227
00:16:54,645 --> 00:17:02,780
anote el valor de la URL en la barra de direcciones.

228
00:17:02,780 --> 00:17:08,565
Entonces, este es el host local 4,200 barra DishDetail barra 0.

229
00:17:08,565 --> 00:17:12,080
Este cero es la identificación de este plato.

230
00:17:12,080 --> 00:17:14,630
Entonces, ese valor se está pasando,

231
00:17:14,630 --> 00:17:19,985
y así es como el componente dishDetail aquí se muestra aquí, retrocede.

232
00:17:19,985 --> 00:17:21,540
Al hacer clic en el otro elemento,

233
00:17:21,540 --> 00:17:27,750
se puede ver que ahora en las URL dice, DishDetail barra 1.

234
00:17:27,750 --> 00:17:29,750
Del mismo modo, para el cuarto,

235
00:17:29,750 --> 00:17:33,390
dice barra DishDetail 3, y así sucesivamente.

236
00:17:33,390 --> 00:17:37,560
Por lo tanto, este valor de parámetro es el que indica a

237
00:17:37,560 --> 00:17:41,210
el componente dishDetail qué plato particular

238
00:17:41,210 --> 00:17:44,235
debe ser mostrado por el componente dishDetail.

239
00:17:44,235 --> 00:17:49,250
Eso es lo que está utilizando el componente DishDetail para recuperar la información sobre

240
00:17:49,250 --> 00:17:55,045
ese plato específico del DishService usando el método GetDish,

241
00:17:55,045 --> 00:18:01,715
y luego esa información se muestra en la vista del componente DishDetail.

242
00:18:01,715 --> 00:18:03,675
Así que, ahora en este ejercicio,

243
00:18:03,675 --> 00:18:09,575
hemos aprendido cómo podemos usar routeParameters para pasar información a un componente,

244
00:18:09,575 --> 00:18:14,804
y luego el componente obtener acceso al parámetro y luego usa ese routeParameter

245
00:18:14,804 --> 00:18:18,320
para decidir la forma en que renderiza

246
00:18:18,320 --> 00:18:22,850
la vista o recuperar la información y renderizar la vista en consecuencia.

247
00:18:22,850 --> 00:18:26,385
Con esto, completamos este ejercicio.

248
00:18:26,385 --> 00:18:31,490
Ya casi hemos terminado de construir nuestra aplicación de una sola página

249
00:18:31,490 --> 00:18:37,145
para la aplicación de restaurante en la que hemos estado trabajando hasta ahora.

250
00:18:37,145 --> 00:18:40,815
Este es un buen momento para que hagas un commit de git con el mensaje,

251
00:18:40,815 --> 00:18:44,060
Aplicación de una sola página parte 2.