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

我假设“重新加载页面”是指调用this.router 的navigate 方法。如果是这样的话，这很可能与您每次创建此组件的实例时都创建一个新的路由器事件观察者有关，但不要在ngOnDestroy 循环中处理生成的subscription。要解决此问题，您可以执行以下操作：

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