Autenticación con Angular y Firebase
Autenticación con Angular y Firebase


Detectar el cambio de rutas en Angular 2 es muy sencillo gracias a su router, en este tutorial vamos a ver cómo marcar la navegación activa gracias a sus eventos.

Existe una propiedad llamada events en el router de Angular 2 que nos permite recorrer estos eventos y acceder a cada uno de ellos para hacer lo que necesitemos en cada caso, los eventos disponibles son los siguientes.

En este caso el evento importante es NavigationStart, que es el que vamos a utilizar para poder saber la url actual en la que nos encontramos al realizar cualquier cambio en la navegación.

Cómo detectar el cambio de rutas en Angular 2

Pues es muy sencillo la verdad, simplemente debemos recorrer todos los eventos, comprobar la instancia de cada uno de ellos y escoger el que necesitemos, en nuestro caso NavigationStart, una vez lo hemos detectado simplemente debemos aplicar cierta lógica.

Imagina que tienes la siguiente navegación, la cual establece la clase activa a través de una propiedad del componente asociado.

Detectar el cambio de rutas en Angular 2
Haciendo uso de ngClass podemos saber si aplicamos o no la clase active al elemento li en cuestión, de esta forma la navegación quedará activa y el usuario sabrá en que ruta se encuentra.

[button-red url=”https://www.cursosdesarrolloweb.es/course/aprende-angular-2-desde-0/” target=”_blank” position=”center”] Aprende a desarrollar aplicaciones con Angular 2 desde 0 con la versión estable [/button-red]
Para poder marcar la navegación activa simplemente añade el siguiente código en el constructor de tu componente principal, el que hace el bootstrap de tu aplicación, en mi caso app.component.

Con eso somos capaces de poder cambiar la navegación de nuestra aplicación y detectar el cambio de rutas en Angular 2, espero que te haya parecido interesante.

Fuente: Stackoverflow