Angulaire: la modification d'une route unique émet plusieurs événements 'NavigationEnd'

Question

J'utilise Angular 4, et c'est mon code dans l'un des composants où j'ai besoin d'attraper que l'itinéraire a changé et recharger la page.

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

Mon problème est que je reçois plusieurs événements « NavigationEnd » pour une route. Pour certaines routes, console.log écrit même des valeurs 6,7.

Comment cela peut-il se produire?

Answer 1

Je suppose que par "reload page" vous voulez dire l'appel de la méthode navigate de this.router. Si c'est le cas, cela est probablement lié au fait que vous créez un nouvel observateur des événements du routeur chaque fois que vous créez une instance de ce composant, mais ne disposez pas le subscription généré dans le cycle ngOnDestroy. Pour résoudre ce problème, vous pouvez procéder comme suit:

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

export class FooComponent 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) => { 
      //do something with the value 
     }); 
    } 

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