在 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的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的SAP 电商云 Spartacus UI 路由事件监控的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。