Angular Router懒加载模块内子路由配置data数据丢失问题咨询

问题解答 #

1. 懒加载模块子路由定义data属性是完全合法的 #

Angular官方没有限制懒加载模块内部子路由配置data属性，这种写法符合Angular路由规范，你遇到的返回空对象问题和配置规范无关，是路由层级的读取逻辑问题导致的。

2. 问题根因 #

懒加载模块的所有路由都是嵌套在父路由（即UserManagementModule中定义的path: RolesRoutes.roles对应的路由节点）之下的，默认ActivatedRoute只会返回当前节点层级的data，如果你读取的层级不对，就会拿到父路由的空data对象。

你移除懒加载后路由层级变平，所以直接读取就可以拿到对应数据，本质就是层级匹配的问题。

3. 可用解决方案 #

方案1：遍历路由层级获取合并后的data

在组件中递归遍历当前路由的父节点/子节点，合并所有层级的data：

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  let mergedData = {};
  // 向上遍历所有父路由合并data
  let currentRoute = this.route.snapshot;
  while (currentRoute) {
    mergedData = { ...mergedData, ...currentRoute.data };
    currentRoute = currentRoute.parent;
  }
  console.log(mergedData); // 可拿到你定义的privileges、newRole属性
}

方案2：配置参数继承策略

如果你使用Angular 14及以上版本，可以直接在根路由配置中开启全局参数继承，配置后可以直接读取合并后的所有层级data：

// 根模块的路由配置
@NgModule({
  imports: [RouterModule.forRoot(routes, {
    paramsInheritanceStrategy: 'always'
  })],
  exports: [RouterModule]
})
export class AppRoutingModule {}

配置后在组件内直接读取即可拿到完整数据：

constructor(private route: ActivatedRoute) {
  console.log(this.route.snapshot.data);
}

方案3：监听路由事件获取激活路由data

通过监听NavigationEnd事件拿到最终激活的路由节点，读取对应data：

import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs';

constructor(private router: Router) {}

ngOnInit() {
  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd)
  ).subscribe(() => {
    let currentRoute = this.router.routerState.root;
    while (currentRoute.firstChild) {
      currentRoute = currentRoute.firstChild;
    }
    console.log(currentRoute.snapshot.data);
  });
}

内容的提问来源于stack exchange，提问作者user3602300