Ahora continuemos trabajando en
la aplicación de una sola página que hemos estado desarrollando en nuestros ejercicios.
Hasta ahora, hemos integrado el componente de inicio,
el componente de menú y el componente de contacto en nuestra aplicación de una sola página.
El componente de detalle de plato se está utilizando actualmente en la parte inferior del componente de menú.
Así que, al hacer clic en cualquiera de los elementos del menú,
los detalles del plato se muestran justo debajo en el menú.
Ahora, vamos a aprovechar otro soporte que proporciona el módulo Router Angular,
que nos permite definir una ruta con un parámetro incluido en la definición de ruta.
De esta manera, podemos pasar información a otro componente,
y luego desde allí,
mostrar información en el otro componente.
¿Cómo funciona esto?
Aprendamos eso haciendo este ejercicio.
Así que, volviendo a nuestra aplicación,
en esta aplicación, cuando nos fijamos en el menú,
al hacer clic en cualquier elemento del menú,
los detalles del elemento seleccionado se muestran justo debajo en el menú.
Ahora, me gustaría separar la vista de los detalles
de este plato en particular en su propia vista separada.
Cuando hago clic en cualquiera de estos,
quiero ser capaz de mostrar los detalles del plato,
específicamente en una vista en esta aplicación.
Para lograr eso, vamos a aprovechar, como dije,
con los parámetros de ruta para permitir que
nosotros soportemos ese tipo de comportamiento en nuestra aplicación.
¿Cómo hacemos eso?
Vamos a hacer eso comenzando con la definición de una nueva ruta con un parámetro aquí.
Para hacer uso del componente de detalle plato,
vamos a ir a las rutas,
y luego definir una nueva ruta tras menú aquí.
Mire la forma en que se define la ruta aquí.
Así que, esto es camino, detalle de la vajilla.
Por lo tanto, este detalle del plato es parte del componente de detalle del plato.
Por lo tanto, tiene su propia visión.
Ahora, quiero poder navegar a esa vista,
pero con un ID de parámetro,
porque esta vista de detalle de plato podría mostrar cualquiera de los platos en mi menú.
Por lo tanto, quiero poder mostrar un plato seleccionado en el detalle del plato.
Ahora, ese es el plato seleccionado tendrá una ID,
y quiero pasar esa ID a mi plato componentes detallados,
para que pueda representar los detalles de ese plato en particular.
Entonces, en el enrutador angular,
admite pasar parámetros definiendo parámetros de ruta como este,
en la definición del enrutador en sí.
Entonces, dentro de la ruta,
si digo dos puntos,
para que dos puntos puedan ser seguidos por un nombre que actuará como un parámetro de ruta.
Entonces, en este caso, voy a usar el nombre del parámetro como una ID.
Este ID se refiere al ID del plato que ya hemos dado a cada uno de nuestros platos.
Ahora, esto me llevará al componente de detalle del plato.
Por lo tanto, añadiremos esta nueva ruta a nuestra definición de ruta angular aquí.
Guarde los cambios.
Ahora, en el componente de menú,
así que cuando abro el archivo de plantilla de componentes de menú,
en el componente de menú,
estoy mostrando el plato en la parte inferior aquí.
Entonces, no quiero hacer eso.
Entonces, voy a eliminar esa parte de mi plantilla de componentes de menú.
En cambio, lo que me doy cuenta es que justo ahí,
soy capaz de acceder al plato en particular.
Entonces, cuando se hace clic en el plato,
en lugar de hacer este clic aquí,
así que voy a eliminar este clic aquí, y en su lugar,
voy a definir un nuevo parámetro aquí llamado routerLink.
Verá el uso del routerLink aquí.
Ahora, este routerLink toma valores que puede proporcionar en su plantilla de esta manera.
Por lo tanto, puede suministrar eso como una matriz aquí.
Dentro de la matriz, puede suministrar dos partes de una matriz.
Así que, detalle de la vajilla.
Entonces, viste que cuando definí la ruta, dije «/dishdetail/:id».
Entonces, el enrutador angular pasará cualquier parámetro que suministre
aquí como parte de la segunda parte de esa URL allí.
Así que, ahora, junto con el detalle del plato,
voy a construir mi routerLink usando detalle del plato,
y también el ID del plato aquí.
Por lo tanto, este ID plato se refiere al plato específico que tengo
seleccionado de la variedad de platos aquí.
Así que, ese ID plato,
tengo acceso a él aquí.
Entonces, voy a usar eso como la segunda parte dentro de esta matriz de parámetros,
que voy a pasar para mi routerLink aquí.
Así que, si lo defino así,
entonces cuando haga clic en ese elemento en particular en mi menú,
entonces ese detallado, el ID del plato,
junto con este detalle,
se pasará como el enlace del router.
Por lo tanto, esa información ahora estará disponible a través de
mis enrutadores angulares a mis componentes de detalle plato.
Por lo tanto, el router permite que el componente de detalle del plato recupere este valor,
ID del plato, de la ruta angular cuando se pasa esta información.
¿Cómo lo hacemos? Para eso,
tenemos que ir al componente de detalle del plato y arreglarlo para recibir esta información.
Así que, después de realizar estos cambios en el componente de menú,
vamos ahora a cambiar al componente de detalle del plato.
Dentro del componente de detalle plato,
ves que actualmente,
estaba recibiendo el plato como una entrada aquí.
Ya no voy a recibir los platos y la entrada.
Por lo tanto, voy a dejar que como tal,
como simplemente un plato.
Ya no necesito la entrada porque no estoy pasando esta información usando el plato,
entre corchetes que incluí en mi componente de menú.
En su lugar, esta información acerca de los platos específicos que entran a través del enrutador angular.
¿Cómo obtengo acceso a ese ID de plato?
Así que, para hacer eso,
voy aquí.
En esta aplicación, voy a agregar dos importaciones más aquí,
una de ellas llamada Params.
Por lo tanto, este Params me da acceso a
los parámetros del router que están disponibles cuando vengo.
Entonces, esto es del enrutador angular, Params,
y también otro que necesito es la Ubicación.
Ubicación me permite rastrear la ubicación de
mi página en el historial de mi navegador.
Entonces, eso sería útil para mí navegar hacia atrás desde mi detalle de plato cuando lo necesite.
Me verás usando eso un poco más tarde.
Entonces, dos cosas que necesito importar: Params y Ubicación.
Veremos cómo hacemos uso de estos dos en nuestra aplicación.
Así que, junto con esto,
entraremos y entraremos aquí, para el constructor,
ahora notamos que el valor del plato ahora no está disponible desde mi componente de menú.
Pero en su lugar, tengo que ir explícitamente y buscar esto del DishService.
Por lo tanto, voy a importar
the DishService también en mi componente de detalle de plato.
DishService aquí.
Entonces, esto me permitirá ir a buscar un plato específico del Servicio de Dish.
Por lo tanto, recuerda que ya tenemos
el método GetDish y el Servicio de Dish que podemos usar.
Ahora, lo siguiente importante para nosotros es conseguir el id del plato.
Ahora, ¿cómo podemos conseguir el id del plato.
Entonces, aquí es donde en el constructor.
Ahora, necesito que todos estos servicios estén disponibles,
así que voy a decir Servicio de platos.
Entonces, el otro es Ubicación.
Por lo tanto, la ubicación es otro servicio que está disponible para mí.
Entonces, ambos se usarán dentro de mi aplicación.
Entonces, cuando este componente del plato es inicializado,
entonces en este punto en el ngOnInit,
puedo ir y buscar la información sobre el plato específico de los Params.
Entonces, ¿cómo lo hacemos? Entonces, dejamos id.
Entonces, aquí es donde voy a buscar la id,
, así que diría más esto.
También para obtener el valor de la ruta,
necesito inyectar otro servicio llamado servicio ActivatedRoute.
Eso es parte de los routers angulares.
Así que este servicio ActivatedRoute me proporciona acceso a la ruta aquí.
Así que, yo diría,
, así que junto con el DishService también necesito definir una más llamada
como ruta que sería el servicio ActivatedRoute aquí.
Entonces, todos estos tres estarán disponibles para mí.
Así que ahí mismo, puedo pedir
esta ruta, Snapshot, Params.
Este Params es una matriz a
que puedo indexar usando el id como el valor, por lo que Params id.
Esto me obtiene el id del parámetro.
Entonces, cuando defino esta URL,
la URL para esto se definiría como Dishdetail.
Por ejemplo, DishDetail 0,
DishDetail 1, DishDetail 2, etc.
Entonces, así es como las URL de estos componentes se van a definir allí.
Entonces, ese valor que voy a buscar aquí.
Ahora, una vez que me haga cargo de la idea del plato, entonces puedo decir,
este plato es igual a DishService
y obtener el plato y getDish tomará el id como el parámetro aquí.
Entonces, con esto, cuando hago clic en un plato en mi componente de menú,
ese enlace que tengo el enlace del enrutador que tengo configurado allí,
pasará el id del plato a mi Router como Router Parameter,
y que estará disponible para mí en
mi componente DishDetail accediendo al ActivatedRoute servicio aquí.
Entonces, una vez que lo consiga,
entonces puedo usar ese valor para consultar el plato aquí.
Ahora bien, esta no es la forma completa de hacer las cosas.
Más adelante en el siguiente módulo,
vamos a usar algo llamado JavaScript reactivo.
Entonces, en ese momento, volveré para redefinir esto en
de una manera diferente para que mi componente DishDetail pueda realizar un seguimiento de
cualquier cambio que realice en mi URL y
cambie automáticamente la información que está siendo mostrada por este componente.
Llegaremos a eso en uno de los ejercicios posteriores en el siguiente módulo,
pero esto funciona bien por el momento, así que vamos a usar esto.
Además, ahora cuando voy a los detalles del plato
quiero poder volver al menú del plato.
Por lo tanto, voy a añadir un botón Atrás en mi tarjeta un botón Atrás en mi tarjeta,
que cuando se pulsa me llevará de vuelta a la ubicación anterior en mi navegador.
Entonces, para hacer eso, voy a agregar un método aquí llamado GoBack,
que esencialmente hará uso
del servicio de ubicación que he incluido aquí.
El servicio de ubicación proporciona un método llamado Atrás que me permite volver
al elemento anterior en el historial del navegador.
Así que, de esa manera, voy a navegar de nuevo al menú desde los detalles aquí.
Entonces, este método GoBack se agrega aquí.
Ahora, tenemos que ir y arreglar el componente DishDetail aquí.
Por lo tanto, en el archivo de plantilla de componentes DishDetail,
aquí tenemos dos botones que son el botón Me gusta y Compartir.
Voy a añadir un botón más aquí.
Para este botón, agregaría,
si se hace clic en este botón,
esto dará como resultado una llamada al método GoBack que
acabo de agregar a mi DishDetail component.tsfile.
Entonces, esto sería un botón Atrás allí.
Mientras estamos en ello,
también podríamos arreglar los enlaces de componentes de Pie de página.
Así que, yendo al footercomponent.htmlfile en la parte inferior aquí donde tenemos estos enlaces,
voy a añadir en el routerLink aquí con
el parámetro home para el primero,
y luego menú para el segundo,
y póngase en contacto con nosotros para el tercero en el pie de página aquí.
Guardemos los cambios.
Ir a su aplicación,
si ahora hace clic en el menú,
los elementos del menú se muestran aquí.
Si hacemos clic en cualquiera de los elementos del menú,
notarías que los detalles del plato se muestran en una vista separada aquí.
Estos detalles, como puede ver,
esto es exactamente lo que el componente DishDetail estaba mostrando anteriormente,
pero en la parte inferior del menú en el componente de menú,
ahora tenemos que mostrarlo en una vista separada.
Ahora, este componente DishDetail,
ahora puede volver al menú haciendo clic en el botón Atrás.
Así que, cuando haces clic en el botón Atrás,
estás de vuelta en el menú.
Cuando haces clic en otro elemento,
ves que los detalles de ese elemento en particular se muestran aquí,
de manera similar para el tercero también y luego puedes volver atrás.
Ahora, al hacer clic en cualquiera de estos elementos,
anote el valor de la URL en la barra de direcciones.
Entonces, este es el host local 4,200 barra DishDetail barra 0.
Este cero es la identificación de este plato.
Entonces, ese valor se está pasando,
y así es como el componente dishDetail aquí se muestra aquí, retrocede.
Al hacer clic en el otro elemento,
se puede ver que ahora en las URL dice, DishDetail barra 1.
Del mismo modo, para el cuarto,
dice barra DishDetail 3, y así sucesivamente.
Por lo tanto, este valor de parámetro es el que indica a
el componente dishDetail qué plato particular
debe ser mostrado por el componente dishDetail.
Eso es lo que está utilizando el componente DishDetail para recuperar la información sobre
ese plato específico del DishService usando el método GetDish,
y luego esa información se muestra en la vista del componente DishDetail.
Así que, ahora en este ejercicio,
hemos aprendido cómo podemos usar routeParameters para pasar información a un componente,
y luego el componente obtener acceso al parámetro y luego usa ese routeParameter
para decidir la forma en que renderiza
la vista o recuperar la información y renderizar la vista en consecuencia.
Con esto, completamos este ejercicio.
Ya casi hemos terminado de construir nuestra aplicación de una sola página
para la aplicación de restaurante en la que hemos estado trabajando hasta ahora.
Este es un buen momento para que hagas un commit de git con el mensaje,
Aplicación de una sola página parte 2.