Navegación Dinámica en Angular: Uso de Router Link y Router Active
Resumen
Toda aplicación requiere de una barra de navegación, de un menú o enlaces para redireccionar a través de sus rutas.
Redirección de ruta en Angular
No es buena práctica realizar una redirección a otra ruta utilizando un simple href, ya que el mismo genera que se recargue toda la página y vuelva a renderizarse los componentes.
Angular posee una alternativa para evitar el redireccionamiento utilizando la directiva routerLink.
Comienza creando enlaces con el elemento HTML <a>, pero en lugar de utilizar href, utiliza routerLink.
Es así de simple, si las rutas son correctas y están creadas en el archivo app-routing.module.ts, Angular renderizará a través del <router-outlet></router-outlet> el componente correspondiente a la ruta sin recargar la página.
Parámetros dinámicos en las rutas
También es posible hacer un binding en el routerLink para crear rutas con parámetros dinámicos. Para esto, rodea esta directiva de [] y pásale como input un array. Angular se encargará de construir las rutas con cada elemento del mismo.
El ejemplo anterior dará como resultado las rutas /catalogo/electronica, /catalogo/12 y /catalogo/13ABC. Cada ruta con su propio parámetro dinámico que podrás capturar posteriormente en el controlador de tu componente.
Cómo identificar ruta activada
Para mejorar la experiencia del usuario utilizando la aplicación, es buena práctica resaltar con algún estilo CSS particular la ruta activada en el momento. Angular hace esto por nosotros gracias a la directiva routerLinkActive.
Cuando Angular identifique que la misma ruta del enlace está activa, le agregará la clase active. Ya luego es tarea de darle estilos a esta clase para que luzca diferente con respecto a las rutas desactivadas.
Les comparto el código de categories.services.ts para aquellos que vienen trabajando el proyecto desde antes y no clonaron el repositorio en este curso.
No es necesario crear un modelo para Categorías, recuerden que ya habíamos generado uno dentro del modelo de Productos
Les comparto la documentacion oficial para ampliar los conceptos que Nico nos da en esta clase y en general en el curso:
https://docs.angular.lat/guide/router
Muy interesante todo lo que se puede hacer con las rutas en Angular, supongo que al final del curso ya habremos visto la mayoría de opciones.
A mi me ha sucedido un acontecimiento de lo mas extraño, y es que cada vez que cambiaba entre las categorias, en vez de inicializar el offset a 0 este incrementaba y el array de productos seguia siendo el mismo, por ende, en vez de sustituir los productos de cada categoria venian concatenados con los productos de la categoria anterior.
Es como si en vez de reiniciar los atributos del componente cada vez que cambiaba de categoria, se arrastrara de un modo que no entiendo para nada sus valores actuales.
¿A alguien más le ha pasado?
Yo tuve que inicializar los valores de limit, offset y el arreglo de productos dentro del ngOnInit de mi componente de categoria.
Lo que creo que ocurre es que Angular renderiza el componente cuando cambiás de categoría pero no lo vuelve a crear. Lo que podés hacer es reiniciar los valores dentro del switchMap como hiciste o implementar AfterViewInit que básicamente ese hook se ejecuta cada vez que se renderiza el componente
Categoría electronics: 🙂
Categoría toys: ...😲
Angular es genial, recuerdo que para hacer algo así tenía que hacer variables y funciones en javascript para saber en cual estaba posicionado
qué pasa si no quiero mostrar el id en la url ? en su lugar quisiera el nombre de la categoria
Increible clase de Routerlink & RouterActive, Espectacular.
Con esta clase me surgió una duda con respecto a un caso. Si por ejemplo para una app que quiera renderizar solo información de diferentes ferreterías y quisiera mostrar la información en una sola pagina de solo una ferretería, tendría que crear por cada ferretería una pagina diferente y luego enrutarlas?. Agradezco mucho a quien me de una respuesta :D
Para ello crearias solo un componente master y a este le setearias un unico valor para que pueda renderizar.
Creo que utilizando el @input puedes recibir un objeto que tenga la información de la ferreteria, desde el componente padre puedes enviar esa información, bueno, no lo he probado pero posiblemente funcione. La otra forma es solamente enviando el id de la ferretería puede ser por parametro, como lo estamos haciendo, y luego desde el componente hacer lo mismo, la petición, en el servicio debes tener como un metodo de getById o algo así y te traes el todo objeto de la base de datos. Esa consulta en el componente te recomiendo hacerla en el ngOnInit para que carge antes del render.
