Angular: updating a single route triggers multiple 'NavigationEnd' events

Question

Angular: updating a single route triggers multiple 'NavigationEnd' events

I am currently working with Angular 4 and have written the following code in one of my components to detect when a route has changed and reload the page:

ngOnInit() {
        this.router.events.subscribe((value) => {
          if (value instanceof NavigationEnd) {
             console.log(value);
          }
        });
    }

However, I am encountering an issue where multiple 'NavigationEnd' events are triggered for a single route change. In some cases, the console logs up to 6 or 7 values.

Why is this happening?

angular typescript rxjs angular-router

Answer 1

Answer №1

When you mention "reload page," I assume you are referring to triggering the navigate method within this.router. If this is the case, the issue may be linked to the creation of a new observer for router events every time an instance of this component is created without properly disposing of the generated subscription during the ngOnDestroy cycle. To address this issue, consider the following approach:

import { Subscription } from 'rxjs/Subscription';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/filter';    

export class BarComponent implements OnInit, OnDestroy {
   private _routerSub = Subscription.EMPTY;
   constructor(private router: Router){}

   ngOnInit(){
     this._routerSub = this.router.events
         .filter(event => event instanceof NavigationEnd)
         .do(event => console.log(value)) // use do operator for log operations
         .subscribe((value) => {
          //perform actions with the value
         });
   }

   ngOnDestroy(){
     this._routerSub.unsubscribe();
   }
}

Answer 2

When you mention "reload page," I assume you are referring to triggering the navigate method within this.router. If this is the case, the issue may be linked to the creation of a new observer for router events every time an instance of this component is created without properly disposing of the generated subscription during the ngOnDestroy cycle. To address this issue, consider the following approach:

import { Subscription } from 'rxjs/Subscription';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/filter';    

export class BarComponent implements OnInit, OnDestroy {
   private _routerSub = Subscription.EMPTY;
   constructor(private router: Router){}

   ngOnInit(){
     this._routerSub = this.router.events
         .filter(event => event instanceof NavigationEnd)
         .do(event => console.log(value)) // use do operator for log operations
         .subscribe((value) => {
          //perform actions with the value
         });
   }

   ngOnDestroy(){
     this._routerSub.unsubscribe();
   }
}

Angular: updating a single route triggers multiple 'NavigationEnd' events

Answer №1

Similar questions

Issue: The Angular build encountered an error stating that the 'AggregateQuerySnapshot<T>' generic type requires one type argument after running npm install

Integrate a fresh global JSX attribute into your React project without the need for @types in node_modules

An automatic conversion cannot handle spaces and prohibited characters in Object keys

Encountering build errors with @angular/cdk and @angular/forms post updating to Angular 11

Can we establish communication between the backend and frontend in React JS by utilizing localstorage?

What steps should be taken to prepare data for transmission to a server in a Next.js environment?

I am facing a problem with React Hooks useRef where I am unable to retrieve the updated state value

Incorporating D3's library functions into Rxjs for seamless integration with Observables

Tips for creating an initial angular2 application with jspm integration using angular cli

Exploring File Read and Write Functionality in Angular 4

shifting the angular directives to alternate the bootstrap class of hyperlinks

Angular routerlink params can be secured using encryption and decryption techniques

During the installation of Angular CLI, an error occurred indicating an unexpected ending of JSON input while parsing near the string '...gsJjnNLbV xrOnxOWiCk'

"Hmm, the React context's state doesn't seem to be changing

What is the reason for instances being compatible even if their class constructors do not match?

Ways to retrieve "this" while utilizing a service for handling HTTP response errors

The method of pausing a function until the result of another function is returned

The environment production variable is perpetually set to true within the app.module.ts file

Is it more efficient to wait for the server to respond, or should I update the client immediately

Issue: The initial parameter should be a File or Blob object