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

The attribute is not found on the combined type

The 'connectedCallback' property is not found in the 'HTMLElement' type

What is the best way to output a JSX element using an inline switch statement?

Substitute Customized Interface Type Identifier

What is the best way to transform a JSON data-storing object into an array within Angular?

Having trouble centering an icon in a cell within AG Grid?

Create a single declaration in which you can assign values to multiple const variables

Adjust the height of a div vertically in Angular 2+

Error: Unable to access the 'next' property of null within an Angular 2 Observable

Invoke a function in Playwright exclusively when the test title includes a specific @tag

Is it feasible to alter the TypeScript interface for the default JavaScript object (JSON)?

The cell must be crafted with a styling attribute to determine its placement

Updating the value of an input field in Angular 2

Using class-validator in Node.js to validate arrays of objects

Understanding the mechanism behind how the import statement knows to navigate to the package.json file

Utilizing import for Ionic3 to export const with logic

Verifying User Permissions with Angular 2/4 and API

Ways to dynamically generate a generic that expands a union class type

What is the reason behind the never return value in this typescript template?

Getting the logged in user's ID in Angular using MongoDB and Node.js for the backend