如何通过ActivationStart监控 Angular的路由激活事件
2023-09-14 09:04:01 时间
看个具体的例子:
在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的原创文章,尽在:“汪子熙”:
相关文章
- 自定义 angular-datetime-picker 格式
- 从 Angular Route 中提前获取数据
- Angular 面试题汇总2-Component/Service (Angular v8+)
- uat环境和生产环境的区别_angular 生产环境 相对路径无效
- Angular 14 inject 函数使用过程中的一些注意事项
- 关于 Angular 应用的入口
- Angular forRoot 方法的使用场合介绍
- 关于 Angular 工程文件 angular.json 里的 inlineCritical 属性
- Angular 应用里 ng-package.json 文件的作用是什么?
- Angular 项目中 angular.json builder 字段的可选项介绍
- Angular 2对 React:究竟孰优孰劣?
- angular.element方法汇总