Angular 2 práctico: Sitio de consumo de videos

Extraer información de rutas en Angular 2

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
La contraparte de un enlace dinámico es una ruta que pueda leer estos datos y procesarlos para desplegar información cambiante. En esta lección vamos a aprender cómo configurar una ruta con parámetros variables, cómo detectarlo dentro de un componente y cómo extraer esa información para procesar datos.
06:48

Transcripción

En esta lección vamos a aprender cómo extraer información que se encuentra dentro de una URL, para desplegar datos dentro de una aplicación, un Angular. Acá yo estoy trabajando con una aplicación Angular que está utilizando variables dinámicas en los enlaces. Por ejemplo, si hago clic en el primer video, me va a llevar a una dirección llamada "video-player/123", y en el segundo caso, me va a enviar a "video-player/345". Este segundo número después de "video-player " es el número de identificación que tiene cada uno de estos videos. También tengo un componente llamado "Video Player " que es el que se debe mostrar cuando nosotros hacemos clic en uno de estos enlaces. Vamos a hacer que la información que está enviando, este URL, pueda leerse desde este otro componente y podamos desplegar información. Para eso vamos a necesitar modificar el módulo principal de nuestra aplicación. Vamos a buscar dentro de la aplicación. En este caso "app.module.ts" donde se encuentra la constante con las rutas. Acá, tengo las rutas básicas de mi aplicación, de hecho tengo definido "video-player". Sin embargo, en este caso "video-player" no tiene capacidad de leer cualquier información que venga después de la ruta y si revisamos, dentro de nuestra aplicación, vamos a ver que aunque el enlace se está haciendo hacia "video-player" y está enviando un dato, nos está apareciendo la lista y no el componente correcto. Lo que está sucediendo es que, aunque tenemos definido correctamente la ruta, está ruta no soporta ningún valor adicional y en el momento en el que entramos a un valor adicional nos va a suceder que la aplicación falla y cuando la aplicación falla nos va a enviar a la dirección por defecto que en este caso va a ser la lista de componentes. Por eso nos está mostrado el "video-player". Ahora, lo que vamos a hacer es a darle soporte a las variables Esto es muy sencillo dentro de Angular simplemente vamos a poner "Slash" o barra inclinada y vamos a poner dos puntos y el nombre de una variable que queremos asignar para este valor. Por ejemplo, en este caso voy a poner "VideoID" porque lo que estoy recibiendo es la identificación del video. Vamos a guardar y ahora vamos a ver que cuando yo haga clic sobre los enlaces en mi lista de video, en vez de enviarme otra vez a la lista me va a enviar a este componente. Vamos a hacer clic acá, y vamos a ver que, ahora sí, me está enviando directamente al componente. De hecho, si hago clic directamente sobre "video-player", me va a enviar a la lista porque ahora está esperando recibir un dato después de la dirección "video-player". Ahora, nosotros vamos a capturar la información que está llegando a través de este URL. Vamos a buscar el componente que está recibiendo esa ruta. En este caso, estamos haciéndolo desde "video-player.component". Vamos a necesitar modificar algunas partes de nuestra aplicación. Por ejemplo, vamos a necesitar importar dos módulos, en este caso vamos a importar el módulo "Router", vamos a importar otro módulo que se llama "ActiveRoute", y también vamos a importar "Params". Todo esto lo vamos a hacer desde Angular y lo vamos a hacer desde "angular/router". Vamos a ver, tenemos un error acá. Es "ActivatedRoute". Ahora sí, estamos listos para comenzar a trabajar la ruta, ya tenemos acceso a las mismas. Una vez que ya tenemos acceso a esto, también vamos a incluir soporte para importar datos utilizando el módulo de "Http", y también vamos a definir un par de datos nuevos. En este caso, voy a crear dos nuevas variables al inicio de mi componente, que en este caso se van a llamar "VideoInfo" y "id". Una vez que tenga esto, también necesito modificar el constructor. Vamos a venir acá al constructor, y vamos a inicializar un par de variables. Ya estamos casi listos. Y lo que vamos a hacer es que vamos a necesitar que en el momento que se cargue nuestro componente, vamos a leer la información que se encuentra dentro del URL. ¿Cómo lo vamos a hacer? Vamos a llamar a "this.rute" y esta ruta la vamos a llamar, un "parámetro", vamos a llamar al método "parámetro", y vamos a asignarle una promesa que es "subscribe". Lo que está pasado es que cuando tengamos acceso a los parámetros que nos llegan de la ruta, vamos a ejecutar una función. ¿Cómo la vamos a ejecutar? Acá vamos a definir que vamos a recibir los parámetros y vamos a ejecutar el código que se encuentra dentro de estas llaves. En este caso, lo que hacemos es que vamos a asignar " que "this.id" sea igual a "Params, que es la información que nos va a llegar desde la URL y vamos a definir cuál valor específicamente. Recordemos que hace unos segundos acabamos de definir que " video-player" va a recibir un valor dinámico que se va a llamar "VideoID". Así que vamos a definir que específicamente este valor, lo capturemos acá. De los parámetros que llegan capturemos "VideoID". Listo. Ahora que tenemos esta información, podemos tomar, "this.id", y vamos a llevarlo a nuestra plantilla que se encuentra acá, y solamente para desplegar el dato que estamos recibiendo, voy a mostrar acá el valor, voy a guardar y vamos a ver el resultado que en este caso, es el valor que se encuentra acá. Vamos a poner otro valor que puede ser cualquiera. “valor-de-prueba”. Vamos a ver que se muestra acá. ¿Para qué necesitamos hacer esto? Una vez que tenemos acceso al valor que se encuentra dentro de un URL, podemos comenzar a procesar estas variables y podemos comenzar a definir datos dinámicos dentro de nuestra aplicación. Por ejemplo acá, podemos comenzar a llamar archivos externos, podemos cargar diferentes datos, activar diferentes variables o desplegar la información que viene directamente de este URL.

Angular 2 práctico: Sitio de consumo de videos

Aprende a crear un sitio web de consumo de vídeos con Angular 2, desarrollando el back-end y conectando con el servidor local, terminando por la personalización del reproductor.

2:41 horas (26 Videos)
Actualmente no hay comentarios.
 

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.