SAP 电商云 Spartacus UI 路由事件监控

在 AppModule 里，添加如下代码：

export class AppModule {
  constructor(private router: Router){
    this.router.events.subscribe((data) => {
      console.log('Jerry route event: ', data);
    });
  }
}

运行时的输出：

app.module.ts:92 Jerry route event: NavigationStart {id: 1, url: 'powertools-spa/en/USD/jerryproduct/3881018/Angle%20Grinder%20RT-AG%20115', navigationTrigger: 'imperative', restoredState: null}
15:45:01.056 app.module.ts:92 Jerry route event: RoutesRecognized {id: 1, url: 'powertools-spa/en/USD/jerryproduct/3881018/Angle%20Grinder%20RT-AG%20115', urlAfterRedirects: 'powertools-spa/en/USD/jerryproduct/3881018/Angle%20Grinder%20RT-AG%20115', state: RouterStateSnapshot}
15:45:01.057 app.module.ts:92 Jerry route event: GuardsCheckStart {id: 1, url: 'powertools-spa/en/USD/jerryproduct/3881018/Angle%20Grinder%20RT-AG%20115', urlAfterRedirects: 'powertools-spa/en/USD/jerryproduct/3881018/Angle%20Grinder%20RT-AG%20115', state: RouterStateSnapshot}
15:45:01.073 app.module.ts:92 Jerry route event: ChildActivationStart {snapshot: ActivatedRouteSnapshot}
15:45:01.077 app.module.ts:92 Jerry route event: ActivationStart {snapshot: ActivatedRouteSnapshot}
15:45:08.275 app.module.ts:92 Jerry route event: GuardsCheckEnd {id: 1, url: 'powertools-spa/en/USD/jerryproduct/3881018/Angle%20Grinder%20RT-AG%20115', urlAfterRedirects: 'powertools-spa/en/USD/jerryproduct/3881018/Angle%20Grinder%20RT-AG%20115', state: RouterStateSnapshot, shouldActivate: true}
15:45:08.277 app.module.ts:92 Jerry route event: ResolveStart {id: 1, url: 'powertools-spa/en/USD/jerryproduct/3881018/Angle%20Grinder%20RT-AG%20115', urlAfterRedirects: 'powertools-spa/en/USD/jerryproduct/3881018/Angle%20Grinder%20RT-AG%20115', state: RouterStateSnapshot}
15:45:08.278 app.module.ts:92 Jerry route event: ResolveEnd {id: 1, url: 'powertools-spa/en/USD/jerryproduct/3881018/Angle%20Grinder%20RT-AG%20115', urlAfterRedirects: 'powertools-spa/en/USD/jerryproduct/3881018/Angle%20Grinder%20RT-AG%20115', state: RouterStateSnapshot}
15:45:08.319 app.module.ts:92 Jerry route event: ActivationEnd {snapshot: ActivatedRouteSnapshot}
15:45:08.320 app.module.ts:92 Jerry route event: ChildActivationEnd {snapshot: ActivatedRouteSnapshot}
15:45:08.333 app.module.ts:92 Jerry route event: NavigationEnd {id: 1, url: 'powertools-spa/en/USD/jerryproduct/3881018/Angle%20Grinder%20RT-AG%20115', urlAfterRedirects: 'powertools-spa/en/USD/jerryproduct/3881018/Angle%20Grinder%20RT-AG%20115'}
15:45:08.334 app.module.ts:92 Jerry route event: Scroll {routerEvent: NavigationEnd, position: null, anchor: null}

就可以监控到 Angular 官网上罗列出的 event 事件了：

NavigationStart：导航开始。

RouteConfigLoadStart ：在路由器惰性加载路由配置之前。

RouteConfigLoadEnd ：惰性加载路由后。

RoutesRecognized ：路由器解析 URL 并识别出路由时。

GuardsCheckStart ：当路由器开始路由的守卫阶段时。

ChildActivationStart ：当路由器开始激活子路由时。

ActivationStart ：路由器开始激活路由时。

GuardsCheckEnd ：当路由器成功完成路由的保护阶段时。

ResolveStart ：路由器开始路由的解析阶段时。

ResolveEnd ：当路由器成功完成路由的解析阶段时。

ChildActivationEnd ：当路由器完成激活子路由时。

ActivationEnd ：路由器完成路由激活后。

NavigationEnd ：导航成功结束时。

NavigationCancel ：取消导航时。

NavigationError ：由于意外错误导致导航失败时。

Scroll：用户滚动时。

其中 RoutesRecognized，表示当路由被识别出来时触发的事件。

更多Jerry的原创文章，尽在："汪子熙":