在 AppModule 里，添加如下代碼：

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

運(yùn)行時(shí)的輸出：

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}

就可以監(jiān)控到 Angular 官網(wǎng)上羅列出的 event 事件了：

NavigationStart：導(dǎo)航開始。

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

RouteConfigLoadEnd ：惰性加載路由后。

RoutesRecognized ：路由器解析 URL 并識別出路由時(shí)。

GuardsCheckStart ：當(dāng)路由器開始路由的守衛(wèi)階段時(shí)。

ChildActivationStart ：當(dāng)路由器開始激活子路由時(shí)。

ActivationStart ：路由器開始激活路由時(shí)。

GuardsCheckEnd ：當(dāng)路由器成功完成路由的保護(hù)階段時(shí)。

ResolveStart ：路由器開始路由的解析階段時(shí)。

ResolveEnd ：當(dāng)路由器成功完成路由的解析階段時(shí)。

ChildActivationEnd ：當(dāng)路由器完成激活子路由時(shí)。

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

NavigationEnd ：導(dǎo)航成功結(jié)束時(shí)。

NavigationCancel ：取消導(dǎo)航時(shí)。

NavigationError ：由于意外錯(cuò)誤導(dǎo)致導(dǎo)航失敗時(shí)。

Scroll：用戶滾動(dòng)時(shí)。

其中 RoutesRecognized，表示當(dāng)路由被識別出來時(shí)觸發(fā)的事件。

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。