如何通过ActivationStart监控 Angular的路由激活事件

Jerry Wang

发布于 2021-04-06 15:37:00

9040

发布于 2021-04-06 15:37:00

看个具体的例子：

在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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2021-02-28 ，如有侵权请联系 cloudcommunity@tencent.com 删除

app