Angular:更改单个路由发出多个'NavigationEnd'事件
问题描述:
我正在使用Angular 4,并且这是我在需要捕获该路由已更改并重新加载页面的组件之一中的代码。Angular:更改单个路由发出多个'NavigationEnd'事件
ngOnInit() {
this.router.events.subscribe((value) => {
if (value instanceof NavigationEnd) {
console.log(value);
}
});
}
我的问题是,我得到一个路线的多个'NavigationEnd'事件。 对于某些路由console.log甚至写入6,7个值。
这怎么可能发生?
答
我假设通过“重新加载页面”,你的意思是调用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();
}
}
感谢您的迅速响应。这是我的问题,我没有销毁'ngOnDestroy'上的退订事件。我不知道我应该这样做:) – Milos