Angular : la modification d'un seul itinéraire génère plusieurs événements "NavigationEnd".

Question

J'utilise Angular 4, et voici mon code dans l'un des composants où je dois détecter que la route 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 un même itinéraire. Pour certains itinéraires, le fichier console.log affiche même 6 et 7 valeurs.

Comment cela peut-il arriver ?

Answer 1

Je suppose que par "recharger la page" vous voulez dire appeler la fonction navigate méthode 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 que vous ne disposez pas de l'observateur généré. subscription dans le ngOnDestroy cycle. 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();
   }
}