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

看个具体的例子：

在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的路由激活事件相关推荐

angular复用路由组件_Angular Router的组件路由简介
angular复用路由组件这是SitePoint Angular 2+教程的第4部分,有关如何使用Angular CLI创建CRUD应用程序. 在本文中,我们将介绍Angular Router,并了 ...
angular 前端路由不生效解决方案
angular 前端路由不生效解决方案参考文章: (1)angular 前端路由不生效解决方案 (2)https://www.cnblogs.com/weihanli/p/fix-angular-f ...
Angular核心-路由和导航
Angular核心-路由和导航
angular设置路由实现无刷新跳转
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
angular具名路由
angular具名路由具名路由时独立于主路由的路由,它不随主路由的切换而切换.适合在主路由页面中插入具名路由用于固定展示的部分. 在routes中配置具名路由,outlet后接路由出口的名称. ty ...
angular子路由使用_使用CanActivate / CanActivateChild Guard保护Angular v2 +路由
angular子路由使用 Protecting routes is something that has to happen in any app with authentication. There ...
linux u盘插入事件,Linux 下监控USB设备拔插事件
Linux 下监控USB设备拔插事件发布时间:2018-01-29 00:00, 浏览次数:1111 , 标签: Linux USB * 使用Netlink来实现这是一个特殊的socket,可以接 ...
angular的路由
1.添加<base>元素:告诉路由器如何合成导航用的URL <base hred="/"> // app文件夹是应用的跟目录 2.angular的路由是一个 ...
Angular中路由的嵌套-父子路由
场景 Angular介绍.安装Angular Cli.创建Angular项目入门教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...

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

如何通过ActivationStart监控 Angular的路由激活事件相关推荐

最新文章

热门文章