0

estoy tratando detectar cambios de la url pero no lo estoy logrando, hasta el momento tengo esto:

homeComponent.ts

constructor(private router: Router,private activatedRoute: ActivatedRoute){}

ngOnInit() {
   this.activatedRoute.url.subscribe(url => console.log('The URL changed to: ' + url));
   this.activatedRoute.queryParams.subscribe(params => console.log('The URL changed to: ' + params["name"]));

   this.activatedRoute.paramMap.subscribe((params: ParamMap) => { console.log(params) });
}

homeComponent.html

<app-navbarcust (logout)="logout()"></app-navbarcust>
<div class="container mt-5" [ngClass]='{"pt-5":true}'>
    <router-outlet></router-outlet>
</div>

el <app-navbarcust> es el componente de la navegacion hay estan los routerLink sirven bien, esto me sale en la consola:

introducir la descripción de la imagen aquí

ya cambie varias veces de ruta y no me salen las reacciones, alguien me podría por favor decir que estoy haciendo mal, otra pregunta no me estoy desuscribiendo en el ondestroy ¿esto esta mal?

1 respuesta 1

3

Te deberías subscribir en el ngOnInit, o en el constructor, yo la función que uso para detectar los cambios de ruta es el router.events y filtrando por NavigationEnd.

Y no esta mal que te desuscribas en el ondestroy, ya que si vuelves a cargar el componente, te volverá a subscribir al evento, y tendrás dos subscribers, pero tendrás que suscribirte asignándolo a una variable para desuscribir ese mismo objeto.

public subscriber: Subscription;

//en el constructor llamo mi router
constructor (private router: Router) {}

//En el ngOnInit, me subscribo al router events, que es el que te mandara los eventos cada que se inicie la navegación, y filtramos que solo te mande cuando termina de navegar NavigationEnd

ngOnInit () {
    this.subscriber = router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event) => {
       console.log('The URL changed to: ' + event['url'])
    });
 }

  //En el onDestroy, valido si mi subscriber sigue activo y me desuscribo, si no seguirá activo escuchando cuando navegues a otro componente donde no lo requieras.
 ngOnDestroy () {
    this.subscriber?.unsubscribe();
 }

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.