Angular中能否在路由定义内访问解析后的数据？

首先明确：你在loadChildren的回调里没法直接拿到resolver解析后的数据，因为Angular路由的执行顺序是这样的：

• 匹配到目标路由
• 先加载懒加载模块（触发你写的then回调）
• 解析模块内的路由配置
• 执行resolver获取数据
• 最后激活路由组件

也就是说，模块加载完成的时候，resolver还没开始运行，自然拿不到userData.details。

要实现“懒加载模块加载完成后，基于解析后的数据执行操作”，可以用以下方案：

方案：在懒加载模块的根组件中获取解析数据 #

1. 给你的懒加载模块MyModule创建一个根组件（比如MyRootComponent），作为模块路由的入口组件。
2. 在这个根组件里，通过ActivatedRoute获取resolver返回的数据：

// my-root.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-my-root',
  template: '<router-outlet></router-outlet>' // 用来渲染模块内的子路由
})
export class MyRootComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // 从路由快照里获取解析后的userData
    const userData = this.route.snapshot.data['userData'];
    if (userData?.details) {
      // 在这里执行你需要的操作
      console.log('拿到用户详情：', userData.details);
      // 比如初始化模块内的服务、设置全局状态等
    }
  }
}

3. 配置MyModule内部的路由，把根路径指向这个组件：

// my.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MyRootComponent } from './my-root.component';

const routes: Routes = [
  {
    path: '',
    component: MyRootComponent,
    // 这里可以添加模块内的子路由
    children: [
      // 比如 { path: 'sub', component: MySubComponent }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
  declarations: [MyRootComponent]
})
export class MyModule {}

这样，当模块加载完成、resolver执行完毕、路由激活时，根组件的ngOnInit就会触发，你就能拿到解析后的userData.details并执行操作了。

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