Vamos a actualizar nuestra Política de privacidad próximamente. Te recomendamos consultar el avance.

Angular esencial

Leer información de rutas dinámicas

¡Prueba gratis durante 10 días

nuestros 1290 cursos !

Prueba gratis Mostrar modalidades de suscripción
En esta lección vamos a aprender cómo habilitar la funcionalidad de lectura de variables en el URL. Angular permite inyectar valores dinámicos dentro de los URLS y extraerlos dentro de un componente para desplegar información cambiante según la ruta ingresada por el usuario.
10:39

Transcripción

Te voy a mostrar ahora cómo leer la información que le llega a un componente a través de una ruta dinámica. Acá yo tengo una aplicación donde estoy mostrando una lista de libros y cada uno de ellos, al hacer clic, me está enviando a una ruta dinámica, en este caso'detalles' "slash" y el valor correspondiente al libro seleccionado. Por ejemplo, el primer libro me va a dar un'Id'de 1, mientras que el segundo libro me va a dar un'Id'de 2. Voy a hacer que este componente pueda leer la información que se encuentra en la ruta y que pueda desplegar información acorde a los valores que están cambiando. Para eso vamos a ver primero cómo está funcionando esta aplicación y vamos a ver que tenemos definido dentro del módulo principal una ruta dinámica. En este caso tenemos definido'detalles' guion 'libroId'. Este es el nombre de la variable con la que nosotros vamos a trabajar en el componente para poder leer el dato. En este caso, 'libroId'. Quiero que notes que también estoy utilizando una ruta por defecto, en este caso'detalles'. Y al utilizar en conjunto estas dos rutas, 'detalles'y'detalles'guion 'Id', yo estoy mostrando una opción por defecto en caso de que el usuario no utilice la ruta dinámica. Así podemos mostrar contenido y no mostrar únicamente un error. Ahora, sabiendo que este es el nombre de la propiedad'libroId', vamos a leerla dentro del componente que lo recibe. En el caso de mi aplicación, yo ya tengo creado un componente llamado'detalles'. Voy a ir específicamente al archivo'typescript' de este componente llamado'detalles . component . ts'. Dentro de este componente, yo ya tengo algún código hecho y, básicamente, lo que tengo es el código por defecto que genera mi aplicación y también he incluido una variable llamada'libros', que es de tipo 'array'. donde estoy inyectando objetos. En este caso tengo un'array' de objetos y en cada uno tengo la propiedad'Id', donde le asigno un número, título, autor, descripción, donde aparecen los datos de ese libro. El funcionamiento que va a tener nuestra aplicación va a ser capturar el'Id'que estamos recibiendo desde la ruta, compararlo con cada uno de los elementos que se encuentran dentro de este'array' y a partir de eso seleccionar el ítem específico que el usuario está observando. Para capturar la información que nos está llegando desde el URL, tenemos que agregar dos diferentes tipos de datos. Esto lo vamos a hacer a través de la propiedad'import'. Y primero vamos a importar acá en nuestra aplicación, vamos a hacer un'import' y vamos a llamar dos diferentes elementos: el primero que vamos a llamar va a ser'activated Route' y también vamos a llamar específicamente a otro llamado'Params'. Estos dos elementos vienen del módulo de'@angular' "slash"'router'. Ahora que ya tenemos estos dos tipos de datos importados dentro de nuestra aplicación, vamos a trabajar con ellos. El primero, 'activatedRoute', nos va a permitir a nosotros conocer y tener acceso a la ruta o al URL en el que está navegando nuestro usuario, en el que se encuentra nuestra aplicación. Y'Params' nos va a permitir a nosotros conocer específicamente los valores que se encuentran en esa ruta. Así que vamos a ir al constructor y vamos a crear una nueva variable. Esta variable va a ser de tipo privado, así que ponemos'private'. Vamos a definirla como ruta y vamos a definir que el tipo de dato que va a tener esta variable privada va a ser'activatedRoute'. Ahora vamos a trabajar con este valor. Vamos a hacerlo a través del evento'ngOnInit'. El evento'ngOnInit', que en este caso se agrega automáticamente cuando nosotros creamos un componente utilizando la línea de comandos, en el caso de que no lo tengas dentro de tu código, recuerda incluir 'ngOnInit' y también agregar específicamente este objeto a la hora de importar el módulo principal de Angular. 'ngOnInit'se activa en el momento en que el usuario abra este componente. Eso significa que 'ngOnInit'se va a activar en el momento en que el usuario entre específicamente a la ruta'detalles'"slash" y acá la identificación de'libro'. Tenemos que esperar a que se active específicamente este componente para poder tener acceso al URL. Vamos, entonces, al código una vez más y ahora que estamos en'ngOnInit'nosotros tenemos que trabajar acá un evento asíncrono. Esto porque en el momento en que se abre el URL, todavía no se ha terminado de activar el componente. Puede ser que pasen algunos segundos entre el tiempo en que se abre específicamente la ruta y que el componente es visible y que está activo dentro de la aplicación, así que vamos a utilizar algo llamado un observable. Vamos a llamar a'this' punto 'ruta' punto, y acá vamos a llamar a'Params', que es una propiedad que nos va a permitir tener acceso a la variable que está llegando desde la ruta. 'Params'es un observable, lo que significa que es un evento asíncrono al cual podemos suscribirnos. Así que voy a utilizar la propiedad'subscribe' y esto significa que yo voy a ejecutar acciones en el momento en que'Params' tenga información. Antes de eso, yo voy a esperar. Así que voy acá a definir cuál va a ser el código que se va a activar cuando'Params'tenga la información de la ruta. Voy a definir acá que'Params' va a ejecutar un código y este bloque de código que está acá se va a activar únicamente cuando tengamos ya la información de la ruta disponible para trabajar. Yo voy a crear acá una propiedad que se va a llamar'libroId', que va a ser donde voy a almacenar el valor que me está llegando desde el URL. Así que una vez que ya tenga la información del URL y que tenga acceso a esta propiedad, voy a definir mi variable, que en este caso va a ser'this'punto 'libroId', como la he definido acá en la línea doce; 'libroId' es igual a, y acá voy a extraer la información de'Params', así que voy a llamar a'Params'. En este caso, 'Params'es un arreglo asociativo y voy a llamar el valor del URL. Para conocer el nombre de este valor vamos a buscar acá, dentro del módulo principal –y recordamos que lo estamos definiendo con el nombre'libroId'–, así que yo voy a llamar a'Params', en este caso'detalles. components'. Vamos a buscar 'Params'y vamos a decirle a'Params'que utilice el parámetro'libroId'. Ahora ya tenemos acceso al valor que nos está llegando desde la aplicación, en este caso el número 2. Sabiendo eso, vamos a procesar la información. Yo voy a trabajar acá en esta parte específicamente solamente código de JavaScript para poder extraer los valores de un'array'. En este caso, lo que voy a hacer es que voy a crear un nuevo objeto que va a ser'this'punto 'libro Seleccionado', donde voy a tener el valor del libro seleccionado y esto me lo va a devolver un método llamado'this'punto 'encontrar Libro'. Vamos a definir estas dos propiedades, que aún no se encuentran en nuestra aplicación. Así que ponemos'libroSeleccionado' y también vamos a crear el método'encontrarLibro'. En este caso vamos a utilizar la propiedad de JavaScript llamada'filter' y vamos a hacer que 'encontrarLibro' haga un filtrado sobre el'array' en que se encuentran todos los diferentes libros y me muestre acá el valor que corresponda a la variable'libroId', que es la que tenemos a partir del URL. También voy a incluir acá otra parte, que en este caso es una función que va a obtener el'array' y me va a devolver cualquiera de los elementos de este'array' que calce específicamente con el'Id'que tenemos a través de URL. Solamente nos falta desplegar los valores de'libroSeleccionado'. Vamos a ir a la plantilla de este componente y ahora, en vez de mostrar'detallesLibro', lo que vamos a hacer es que vamos a mostrar la información de'libroSeleccionado'. Si vemos acá dentro de este'array', tenemos: título, autor y descripción. Así que yo voy a venir acá y voy a aprovechar que ya tengo un libro seleccionado y voy a mostrar los valores según título, autor y descripción. Guardamos los datos. Ya tenemos lista nuestra aplicación. Examinamos la lista y al hacer clic, por ejemplo, acá en Drácula, me muestra la formación de este libro específico, que es el'Id'4 dentro de mi'array'. Volvemos acá y vemos, por ejemplo, Mujercitas. Me muestra: título, autor, descripción. Y así nosotros podemos crear una aplicación que está indexando las diferentes secciones de la aplicación y estamos obteniendo los datos a partir del URL.

Angular esencial

Aprende a crear aplicaciones con Angular y avanza poco a poco en su uso, empezando por la instalación, configuración y arquitectura hasta la publicación final de una aplicación.

4:27 horas (35 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:29/06/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.