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 只是基数 class.

具体的事件值是

之一

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

例如，您可以使用：

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

另见

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

Here's a live example

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

npm install @bespunky/angular-zen

Angular 路由器事件名称

Angular Router Event Name

angular2-routing

angular