Angular Router 事件名称

18 浏览
0 Comments

Angular Router 事件名称

Angular(2+) 路由器具有一个名为 "events" 的 rxjs 主题属性。一旦订阅，你就能够监听诸如以下事件：

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

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

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

我想知道是否有更好的方法来实现这一点？

0

2 答案

0 Comments

问题的出现原因是在使用Angular Router时，需要对不同的路由事件进行处理，例如导航开始（NavigationStart）、路由识别完成（RoutesRecognized）和导航结束（NavigationEnd）等。然而，由于Angular的Router模块并没有直接提供相应的事件监听器，因此需要自定义事件处理方法。

解决方法是使用Angular Router的扩展库/angular-zen。通过安装该库，并继承RouteAware类，可以创建相应的事件处理方法，如onNavigationStart和onNavigationEnd。在这些方法中，可以使用this.router来访问Router模块，使用this.route来访问激活的路由，使用this.componentBus来访问RouterOutletComponentBus服务。通过在这些方法中打印相应的日志，可以实现对路由事件的处理。

如果想要了解更多关于Angular Router的事件列表，可以参考官方文档中的Router Events部分。此外，还可以参考库的live example来获取实际应用的示例。

要安装/angular-zen库，可以通过以下命令进行安装：

npm install /angular-zen

0
0 Comments

Angular Router事件名称的出现原因是为了能够在Angular应用程序中检测路由变化，并根据不同的事件类型执行相应的操作。

解决方法是使用Angular提供的Router模块，并订阅其events属性。通过过滤事件类型，我们可以只接收特定的路由事件。

下面是一个示例代码：

import { Component } from '@angular/core';
import { Router, NavigationStart } from '@angular/router';
@Component({
  selector: 'app',
  template: ``
})
export class AppComponent {
  constructor(private router: Router) {
    router.events
      .filter(event => event instanceof NavigationStart)
      .subscribe((event: NavigationStart) => {
        // 在这里处理NavigationStart事件
      });
  }
}

在上面的代码中，我们在AppComponent的构造函数中注入了Router，并订阅了其events属性。通过filter函数过滤出NavigationStart事件，然后在subscribe中处理该事件。

Angular Router事件的具体类型包括NavigationStart、NavigationEnd、NavigationCancel、NavigationError和RoutesRecognized。我们可以根据自己的需求选择订阅不同的事件类型，并在对应的subscribe函数中执行相应的操作。

更多关于如何检测Angular 2中的路由变化的信息可以参考这个Stack Overflow问题。

感谢作者的贡献，这个解决方法也被提交回了Angular文档的GitHub仓库，这是最好的贡献形式。

0