Angular: ¿cómo se pasan datos entre URLs?
Siguiendo el curso de Deborah Kurata, en este artículo quiero explicar lo básico que he aprendido:
En la parte 1 vimos lo básico de Angular
En la parte 2 vimos como añadir lógica al html
En la parte 3 vimos el data binding y las pipes
En la parte 4 vimos interfaces, pipes, el ciclo de vida.
En la parte 5 vimos como anidar Component.
Para aprender como compartir datos entre Component es la 6.
Para la parte 7 descubrimos cómo hacer peticiones http.
Mediante la parte 8 aprendimos lo básico del enrutamiento.
De qué forma nos aseguramos de que la página a la cual intenta el usuario navegar es válida. O cómo pasamos datos de mediante la URL. Esos son los temas que abordamos en este lección:
Índice(Drive)
Activando una ruta mediante código 13
Pasando parámetros
Hay veces en las que tenemos que pasar parámetros:
El primer paso es configurar la ruta para que acepte parámetros:
Se logra definiendo /:nombrePropiedad . Además no estamos limitados a una sola propiedad, sino que podemos pasar más si lo hacemos mediante /:nombrePropiedad/:nombreOtra
La idea es asociar la opción a la ruta, por ejemplo cada nombre de producto en la product list, será un enlace:
Luego se pasa el valor mediante la url:
Para obtener el parámetro de la url en la página de detalles del producto, basta con inyectar la dependencia y usar el método snapshot.paramMap.get();
El nombre de la propiedad a obtener debe coincidir con el definido en la ruta:
Código:
Ya tenemos configurada la ruta con la propiedad id en AppModule:
La idea es crear cada nombre de producto como un enlace mediante el cual acceder a sus detalles:
Para ello se indica la ruta asociada al enlace. Como primer parámetro ponemos la ruta base, lo que se escribirá en la barra de direcciones al pulsar en el producto.
Como segundo parámetro se indica el valor de la propiedad que pasaremos por la url, es este caso el identificador del producto:
En el navegador vemos que cada producto es un enlace:
Y si lo clicamos vemos el valor pasado:
A continuación necesitamos obtener el id, en el product details component, para ser capaces de mostrar algo. Primero importamos el ActivatedRoute que es el módulo de angular que nos ayudará:
Luego inyectamos la dependencia en el constructor:
Después obtenemos el valor del id de la url. Para ello usamos el método de ciclo de vida ngOnInit()
En concreto, let se usa para declarar una variable en el ámbito de la función (las variables de JS escritas con var son globales). Luego el + al comienzo de la instrucción es una forma de convertir lo que devuelva, desde el tipo de datos string, a un número. Además usamos _route porque es el módulo que indica la ruta en la barra de navegación, y obtenemos el valor del id.
Y podríamos hacer una petición http para recuperar la info del producto, pero como nos centramos en aprender enrutamiento, escribamoslo:
Además:
Mostramos el id como título de la tabla para comprobar que funciona.
Como resultado al clicar en un producto:
Activando una ruta mediante código
Nos gustaría añadir un botón para volver desde los detalles a la lista de productos:
Para ser capaces de navegar, implementándolo mediante código, necesitamos un component del módulo que ya incorporamos a nuestro AppModule, el RouterModule:
Mediante el router podemos navegar a la ruta que escribamos.
Código
Añadimos a nuestro product details el router:
Y en este ejemplo queremos navegar de vuelta a la lista de productos:
Luego la idea es añadir el botón al html de product details:
Para repasar, usamos el event binding, para escuchar el evento de clic y cuando se produzca llamar al método onBack() el que acabamos de implementar:
Ahora se verá al pulsar sobre un producto el botón Back:
Y si lo pulsamos volvemos a la lista:
Proteger rutas con guardas
Hay situaciones en las que necesitamos comprobar si se puede navegar. Por ejemplo al rellenar un formulario si el usuario clica en otra parte deberíamos chequear si realmente quiere salir sin guardar. O por ejemplo controlar qué partes son visibles no habiéndose logeado y cuáles no.
El router de angular ofrece varios mecanismos, nosotros usaremos en este ejemplo CanActivate que comprueba la validez de la ruta antes de navegar a ella.
La idea es implementar el guarda mediante un Service:
En nuestro caso escribiremos el comportamiento deseado en el método canActivate()
Además hay que registrar este Service en nuestro módulo raíz, AppModule, para que las comprobaciones estén disponibles por toda la aplicación:
En concreto para usar el guarda, hay que incluirlo en la ruta que controlará:
Código
Nuestra necesidad es evitar la navegación en todos aquellos casos que el id pasado como identificador del producto sea distinto de un número o un número inferior a 1:
Para crear nuestro guarda, como un Service, podríamos hacerlo de forma manual, pero es más sencillo mediante la terminal:
El comando ng g s products/product-guard.service -m app.module
Permite: ng llama a Angular CLI, el programa; g se usa para generar; s un servicio; products/product-guard.service es el nombre de la carpeta donde lo queremos meter con su nombre; -m app.module significa que queremos ligar nuestro recién creado servicio al AppModule para que se pueda usar por toda la aplicación.
Como resultado:
Se crea el servicio, y un fichero de test; y se liga con AppModule.
Se puede ver que lo incluyó en AppModule en:
Nuestro product guard service es:
Lo primero es indicar que queremos que implemente la interfaz CanActivate porque es la que le dará el comportamiento de comprobar la url antes de navegar hacia ella:
Luego para arreglar el error de compilación tenemos que implementar el método de la interfaz:
Para implementar el comportamiento:
Primero obtenemos el id del product desde la url.
El más significa que queremos convertir la ristra a un número.
Si el id no es un número o es inferior a 1:
Mostramos un mensaje que informa del error y evitamos que el usuario navegue a esa url:
Si el id es válido retornamos true y permitimos la navegación:
Por último especificamos dónde se usa el guarda, en la ruta de los detalles del producto:
Resultado
Si escribimos una url inválida:
Nos salta un mensaje y se nos evita ir.
Al darle a Aceptar, volvemos a la lista:
Resumen
Hemos aprendido a pasar parámetros a una ruta. A activar las rutas por código. A proteger las rutas con guardas.
Repositorio de la autora para los archivos de inicio
https://github.com/DeborahK/Angular-GettingStarted
