Angular 路由器事件名称

Question

Angular(2+) 路由器有一个 events 属性，它是 rxjs 主题。

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

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

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

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

我很好奇是否有更好的方法来实现这一点？

Answer 1

Event

只是基类。

具体事件值是其中之一

• 导航开始
• 导航结束
• 导航取消
• 导航错误
• 路线已识别

您可以例如使用：

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

另请参阅如何检测 Angular 2 中的路由更改？

Answer 2

如果您安装

@bespunky/angular-zen

，您可以扩展

RouteAware

并创建一个名为

onNavigationEnd

的事件处理程序方法，如下所示：

import { Component                                        } from '@angular/core';
import { NavigationStart, NavigationEnd, RoutesRecognized } from '@angular/router';
import { RouteAware                                       } from '@bespunky/angular-zen/router-x';

@Component({
    selector   : 'app-demo',
    templateUrl: './demo.component.html',
    styleUrls  : ['./demo.component.css']
})
export class DemoComponent extends RouteAware
{
    // ✨ Any router event can have a handler method.
    // See https://angular.io/guide/router#router-events for a complete list of angular's router events.

    // ✨ Use `this.router` to access the router
    // ✨ Use `this.route` to access the activated route
    // ✨ Use `this.componentBus` to access the RouterOutletComponentBus service
    
    protected onNavigationStart(event: NavigationStart): void
    {
        console.log(`Navigation started for: ${event.url}`);
    }

    protected onRoutesRecognized(event: RoutesRecognized): void
    {
        console.log('Recognized routes.');
    }
    
    protected onNavigationEnd(event: NavigationEnd): void
    {
        console.log(`Navigation ended for: ${event.url}`);
    }
}

这是一个活生生的例子

该库是开源的，您可以像这样安装它：

npm 安装@bespunky/angular-zen

Answer 3

这里有一个用于测试目的的简单小方法，它将在发生每个可能的事件名称时将其注销。可能会有很多事情发生得很快，因此我建议您还转到开发工具的“网络”选项卡并启用对 DSL 速度之类的限制，以便您可以看到这些事件以更容易理解的速度发生。

this.router.events.subscribe((ev) => {
  let navType = 'unknown!';
  if (ev instanceof NavigationStart) {
    navType = 'NavigationStart';
  } else if (ev instanceof RouteConfigLoadStart) {
    navType = 'RouteConfigLoadStart';
  } else if (ev instanceof RouteConfigLoadEnd) {
    navType = 'RouteConfigLoadEnd';
  } else if (ev instanceof RoutesRecognized) {
    navType = 'RoutesRecognized';
  } else if (ev instanceof GuardsCheckStart) {
    navType = 'GuardsCheckStart';
  } else if (ev instanceof ChildActivationStart) {
    navType = 'ChildActivationStart';
  } else if (ev instanceof ActivationStart) {
    navType = 'ActivationStart';
  } else if (ev instanceof GuardsCheckEnd) {
    navType = 'GuardsCheckEnd';
  } else if (ev instanceof ResolveStart) {
    navType = 'ResolveStart';
  } else if (ev instanceof ResolveEnd) {
    navType = 'ResolveEnd';
  } else if (ev instanceof ChildActivationEnd) {
    navType = 'ChildActivationEnd';
  } else if (ev instanceof ActivationEnd) {
    navType = 'ActivationEnd';
  } else if (ev instanceof NavigationEnd) {
    navType = 'NavigationEnd';
  } else if (ev instanceof NavigationCancel) {
    navType = 'NavigationCancel';
  } else if (ev instanceof NavigationError) {
    navType = 'NavigationError';
  } else if (ev instanceof NavigationSkipped) {
    navType = 'NavigationSkipped';
  } else if (ev instanceof Scroll) {
    navType = 'Scroll';
  }
  console.log(navType, ev);
});

一般来说，对于大多数简单的应用程序，您只需要查看导航何时结束，如下所示：

this.router.events.subscribe((ev) => {
  let navType = 'unknown!';
  if (ev instanceof NavigationEnd) {
    //Do stuff here
  }
});