角路由器事件名称 [英] Angular Router Event Name

问题描述

Angular(2+)路由器具有事件属性，它是rxjs的主题.

The Angular(2+) router has an events property that is a rxjs subject.

订阅后，您就可以收听以下事件:

Once subscribed, you are able to listen for events like:

router.events.subscribe((event:Event)=> {console.log(event)});

但是问题在于您无法获取事件类型，因为它监听所有事件.一个有问题的解决方案是您可以检查事件的构造函数名称，例如:

but the problem is you have no way to obtain the event type since it listens for all events. A hacky solution is you can inspect the constructor name of the event like:

router.events.subscribe((event: Event) => {
  if(event.constructor.name === 'NavigationStart') {
    loadingService.start();
  } else if(event.constructor.name === 'NavigationEnd') {
    loadingService.complete();
    drawerService.destroyAll();
  }
});

我很好奇是否有更好的方法可以做到这一点?

I was curious if there was a better way to accomplish this?

推荐答案

事件只是基类.

具体事件值是其中之一

• NavigationStart
• NavigationEnd
• NavigationCancel
• NavigationError
• 可识别的路线

例如，您可以使用:

constructor(router:Router) {
  router.events
    .filter(event => event instanceof NavigationStart)
    .subscribe((event:NavigationStart) => {
      // You only receive NavigationStart events
    });

另请参见如何检测路线更改Angular 2?

这篇关于角路由器事件名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！