Angular：更改单个路由发出多个'NavigationEnd'事件

Question

我正在使用Angular 4，并且这是我在需要捕获该路由已更改并重新加载页面的组件之一中的代码。

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

我的问题是，我得到一个路线的多个'NavigationEnd'事件。 对于某些路由console.log甚至写入6,7个值。

这怎么可能发生？

Answer 1

我假设通过“重新加载页面”，你的意思是调用navigate方法this.router。如果是这种情况，这很可能与您每次创建此组件的实例时创建路由器事件的新观察者有关，但不要将生成的subscription置于ngOnDestroy周期中。要解决此问题，您可以执行以下操作：

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