Home / Questions / 431030
Accepted
junior
Asked: 2022-02-26 07:19:53 +0800 CST 2022-02-26 07:19:53 +0800 CST

Detect changes from a router in angular

  • 772

I am trying to detect changes in the url but I am not succeeding, so far I have this:

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>

he <app-navbarcust>is the component of the navigation there are the routerLink they serve well, this I get in the console:

enter image description here

I already changed the route several times and I don't get the reactions, could someone please tell me what I'm doing wrong, another question I'm not unsubscribing in the ondestroy, is this wrong?

angular

1 Answers

  1. Best Answer

    You should subscribe in the ngOnInit, or in the constructor, and the function I use to detect route changes is router.events and filtering by NavigationEnd.

    And it is not bad that you unsubscribe in the ondestroy, because if you reload the component, it will resubscribe you to the event, and you will have two subscribers, but you will have to subscribe assigning it to a variable to unsubscribe that same object.

    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();
 }
    • 3