[MUSIC]
Usando el Router Angular, ya hemos aprendido cómo podemos navegar
de una vista a otra usando la directiva de enlace del router para especificar el enlace.
Y también el módulo router, que nos permite con la especificación de la ruta,
para navegar a las vistas de los diferentes componentes.
Ahora, tomemos un ejemplo del componente dishdetail.
Hasta ahora, el componente dishdetail ha estado funcionando recibiendo los detalles
del plato específico que necesita mostrar desde el componente menu.
Pero esto fue facilitado porque el componente de detalle de la vajilla tenía una propiedad
que enviaba el valor.
Y luego estábamos usando el decorador de entrada para
la variable dentro del componente dishdetail para obtener ese valor que
se estaba pasando desde el componente menu.
Ahora, cuando se están enrutando estos componentes a través de un router,
esta conexión entre los componentes ya no existe.
Así que necesitamos aprovechar el Router Angular para poder pasar información
de un componente al otro componente.
Y esto generalmente se hace en forma de parámetros.
Parámetros que se pueden especificar como parámetros de ruta,
como vamos a aprender un poco más tarde, o parámetros de consulta.
Así que para el Router Angular, lo que hemos aprendido hasta ahora
es que las rutas se especifican como una URL.
Supongamos que tiene la necesidad de pasar un valor de parámetro de un componente a
otro componente.
Entonces, ¿cómo hacemos eso?
Ahora, la única forma de comunicarse entre los componentes
es mediante el enlace del router.
y/o
utilizar el módulo del router para hacer la navegación de un componente a otro componente.
Ahora, aquí es donde la capacidad de especificar valores de parámetros dentro de la URL para
un componente, la ruta de un componente, nos permite pasar esta información.
Entonces, por ejemplo, si queremos poder mostrar un plato
con un id 42 en el componente dishdetail.
Si tuviéramos la capacidad de especificar algo como /dishdetail/42.
Y luego deja que el detalle de la vajilla recoja el número 42 de la URL directamente.
Entonces hemos facilitado un mecanismo para transmitir esta información
un componente a otro componente cuando estamos navegando hacia el otro componente.
Esto es lo que en el módulo Angular Router se conoce como un parámetro de ruta.
¿Cómo funciona un parámetro de ruta?
Así que cuando se especifica un parámetro de ruta en la definición de ruta,
este parámetro de ruta se especifica utilizando un token.
Así que cuando especifica la ruta en la especificación de ruta para
las rutas, especificaría una ruta como esta.
Así que dirías, dishdetail/:id.
Entonces, donde id se convierte en el token que lleva el parámetro de ruta
al componente específico.
El componente dishdetail en este ejemplo.
De esta manera, puede especificar un parámetro de ruta en la ruta.
Y luego desde otra ubicación, puede pasar el parámetro
al componente particular que necesita este parámetro.
El componente dishdetail en este ejemplo.
Ahora, la siguiente pregunta importante que surgirá en su mente es,
¿cómo pasamos este parámetro de ruta?
Ahora, cuando lo pensarás, cuando navegues a través del componente de detalle de vajilla.
Usted viene de otro componente haciendo clic en un enlace o usando
algo llamado la función de navegación como el módulo de ruta proporciona para nosotros.
Veremos ambas formas de navegar a un componente en particular.
Ahora, si necesita especificar el parámetro de ruta, cuando especifique el enlace,
recuerde que estábamos especificando el enlace usando la directiva de enlace
del router en nuestros archivos de plantilla.
Ahora, si va a especificar esto en los archivos de plantilla,
entonces el enlace del router también toma una matriz como vemos.
Una matriz de parámetros de enlace,
donde puede especificar explícitamente el parámetro que se está transmitiendo.
Así que, por ejemplo, en este ejemplo que ves aquí, estamos especificando a.
Y entonces estás haciendo un ngFor.
Entonces está recorriendo un conjunto de objetos JavaScript en
una matriz de objetos JavaScript.
A continuación, cuando especifique el enlace del enrutador.
Así que dentro de allí, puede especificar el enlace del enrutador.
Pero ahora, rodeado de corchetes.
Y esto tomará un valor como este tiene una matriz de parámetros de enlace.
Así que aquí, puede especificar diferentes partes del parámetro de enlace.
Y Angular Router los unirá para formar la URL real.
Así que aquí, puede ver que la primera parte del parámetro link se especifica
como una cadena aquí, por lo que /dishdetail aquí.
Pero la segunda parte se especifica como un valor que se está obteniendo
del plato.
¿Cuál es el plato, el objeto JavaScript de la matriz de objetos JavaScript aquí.
Así que cada plato llevará un dish.id.
Así que el dish.id se puede especificar como
uno de los valores dentro de esta matriz de parámetros de enlace aquí.
Así que cuando haga clic en esto, para el plato específico,
este dish.id será sustituido por el id específico para el plato.
Entonces, por ejemplo, si el id es 42, entonces esto será reemplazado por 42.
Así que cuando el Router Angular reciba este enlace del router,
construirá la URL como /dishdetail/42.
El 42 siendo el valor del dish.id en este punto.
Entonces así es como puedes pasar el parámetro.
La segunda parte de la pregunta, por supuesto,
es cómo recupera el componente este valor del parámetro de enlace?
De lo que hablaremos en la próxima diapositiva.
Otra forma en la que puede hacer que esta navegación al otro componente
es también utilizar un método llamado navigate que es proporcionado por el módulo del router.
Así que puedes decir, this.router.navigate.
Así que esto se puede incluir en su código TypeScript o
su código JavaScript para provocar automáticamente la navegación hacia el otro.
Entonces esto podría incluirse dentro de un método que
incluya en el código TypeScript de su componente.
Y eso se puede invocar desde su plantilla.
Digamos, por ejemplo, haciendo clic en un enlace allí.
Así que dentro de allí en el código, puede incluir una declaración como esta,
this.router.navigate.
Y este método de navegación toma la misma matriz de parámetros de enlace
que el valor del parámetro.
Así que esto también permitirá que esta información se proporcione al Router Angular para que
pueda navegar al otro componente.
Ahora, vamos al otro lado de esta ecuación.
¿Cómo un componente, como el componente dishdetail en este ejemplo,
recupera este valor que se especifica como el token en el enlace URL allí?
Ahora, aquí es donde la biblioteca Angular Router proporciona
un servicio llamado como el servicio ActivatedRoute.
Este servicio ActivatedRoute se puede aprovechar para poder recuperar
estos valores.
Ahora, en particular, para facilitar la recuperación de este parámetro,
el servicio ActivatedRoute proporciona tres cosas diferentes.
Por ejemplo, proporciona este método para recuperar la URL.
Que es un observable de la ruta de ruta.
Que se representa como una matriz de cadenas para cada ruta de ruta.
Usted ha encontrado esta palabra observable aquí.
Por el momento, aferrarse a esa palabra.
Volveremos, mira lo que es un observable en el siguiente módulo.
Pero por el momento, lo que nos dimos cuenta es que este servicio
ActivatedRoute proporciona esto observable.
Del mismo modo, el servicio ActivatedRoute también proporciona otro parámetro observable llamado.
Este parámetro observable pone a disposición de un componente
los valores de parámetro que se pasan como parámetro de ruta.
Entonces este parámetro observable es el que vamos a usar
para recuperar este valor dentro del componente dishdetail.
Verá el método exacto de hacer ese
en el ejercicio que sigue a esta conferencia.
Del mismo modo, también puede pasar parámetros de consulta a otro componente.
Ahora, no vamos a tratar con un ejemplo de los parámetros de consulta en este momento.
Pero más adelante, podríamos encontrar un ejemplo de cómo puede pasar los parámetros de consulta
a través del servicio ActivatedRoute a otro componente.
Con este entendimiento, pasemos al siguiente ejercicio.
Continuaremos desarrollando la aplicación de una sola página.
Y luego habilite el uso de un parámetro de ruta para pasar en
la identificación de un plato al componente dishdetail.
Para que el componente dishdetail, a su vez, pueda usar esta identificación para consultar el servicio dish.
Para obtener los detalles de ese plato específico que se supone que
debe mostrar dentro de su vista.
[MÚSICA]