看個具體的例子：

在app.component.ts里注入Router：

export class AppComponent {constructor(router:Router){console.log('Checking router');router.events.pipe(filter(e => e instanceof ActivationStart)).subscribe(e =>{console.log('路由開始了', e);});router.events.subscribe(e => {console.log('all events: ', e);});} }

events是個Observable，一旦其next方法被調用，我們使用subscribe注冊的回調就會被觸發。

首先的event名稱為：NavigationStart

注意：我的應用代碼里，這個events Observable有兩個subscriber，分別羅列如下：

router.events兩次調用subscribe之后，它擁有了兩個Observables:

這里，Router.js主動發起next調用，傳入的對象就是NavigationStart：

第二個事件是RoutesRecognized:

第三個事件：

GuardsCheckStart:

這里依次fire余下的事件：

function runCanActivateChecks(futureSnapshot, checks, moduleInjector, forwardEvent) {return from(checks).pipe(concatMap((/*** @param {?} check* @return {?}*/(check) => {return from([fireChildActivationStart(check.route.parent, forwardEvent),fireActivationStart(check.route, forwardEvent),runCanActivateChild(futureSnapshot, check.path, moduleInjector),runCanActivate(futureSnapshot, check.route, moduleInjector)]).pipe(concatAll(), first((/*** @param {?} result* @return {?}*/result => {return result !== true;}), (/** @type {?} */ (true))));})), first((/*** @param {?} result* @return {?}*/result => {return result !== true;}), (/** @type {?} */ (true)))); }

all events: NavigationStart {id: 1, url: "/", navigationTrigger: "imperative", restoredState: null} 14:37:43.263 core.js:40855 Angular is running in the development mode. Call enableProdMode() to enable the production mode. 14:39:51.283 app.component.ts:69 all events: RoutesRecognized {id: 1, url: "/", urlAfterRedirects: "/", state: RouterStateSnapshot} 14:40:33.209 app.component.ts:69 all events: GuardsCheckStart {id: 1, url: "/", urlAfterRedirects: "/", state: RouterStateSnapshot} 14:42:09.156 app.component.ts:69 all events: ChildActivationStart {snapshot: ActivatedRouteSnapshot} 14:42:09.161 app.component.ts:65 路由開始了 ActivationStart {snapshot: ActivatedRouteSnapshot} 14:42:12.720 app.component.ts:69 all events: ActivationStart {snapshot: ActivatedRouteSnapshot} 14:42:12.722 app.component.ts:69 all events: GuardsCheckEnd {id: 1, url: "/", urlAfterRedirects: "/", state: RouterStateSnapshot, shouldActivate: true} 14:42:12.722 app.component.ts:69 all events: ResolveStart {id: 1, url: "/", urlAfterRedirects: "/", state: RouterStateSnapshot} 14:42:12.723 app.component.ts:69 all events: ResolveEnd {id: 1, url: "/", urlAfterRedirects: "/", state: RouterStateSnapshot} 14:42:12.726 (index):16 trying to create new tag: wild 14:42:12.729 (index):16 trying to create new tag: h1 14:42:12.731 app.component.ts:69 all events: ActivationEnd {snapshot: ActivatedRouteSnapshot} 14:42:12.732 app.component.ts:69 all events: ChildActivationEnd {snapshot: ActivatedRouteSnapshot} 14:42:12.733 app.component.ts:69 all events: NavigationEnd {id: 1, url: "/", urlAfterRedirects: "/"} 14:42:12.734 app.component.ts:69 all events: Scroll {routerEvent: NavigationEnd, position: null, anchor: null} 14:42:13.372

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的如何通过ActivationStart监控 Angular的路由激活事件的全部內容，希望文章能夠幫你解決所遇到的問題。

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