Angular非注入上下文从后端取路由子数据遇NG0203错误的解决

你遇到的NG0203错误，是因为inject()只能在Angular的注入上下文中调用——比如组件/服务的构造函数、依赖注入工厂函数、装饰器的特定位置等。而你的路由配置是全局常量，在应用启动前就会执行，不属于注入上下文，直接调用inject()自然会报错。

下面提供两种可行的解决方案：

方案一：用APP_INITIALIZER预加载数据 #

这种方式会在应用初始化阶段提前获取后端数据，确保路由配置时数据已准备好。

1. 创建全局服务存储预加载的路由数据：

@Injectable({ providedIn: 'root' })
export class RouteStorageService {
  childRoutes: Page[] = [];
}

2. 在根模块配置APP_INITIALIZER，指定初始化时加载数据：

// 定义初始化函数
export function loadChildRoutes(storage: RouteStorageService, formService: FormService) {
  return () => formService.findRoutes().then(data => {
    storage.childRoutes = data;
  });
}

@NgModule({
  // ...其他模块配置（declarations、imports等）
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: loadChildRoutes,
      deps: [RouteStorageService, FormService],
      multi: true // 允许多个初始化器
    }
  ]
})
export class AppModule {}

3. 修改路由配置，从预加载服务中获取数据：

// 注意：APP_INITIALIZER会在路由初始化前执行完毕，确保数据已加载
const routes: Routes = [{
  path: 'data/some-url',
  component: SomeComponent,
  data: {
    pages: MENU_PAGES,
    children: inject(RouteStorageService).childRoutes
  }
}];

方案二：用Resolve守卫动态获取数据 #

如果不需要在路由初始化阶段就拿到数据，而是组件需要时再加载，推荐用路由的Resolve守卫，在路由激活前获取数据并注入到路由data中。

1. 创建Resolve守卫：

@Injectable({ providedIn: 'root' })
export class ChildRoutesResolver implements Resolve<Page[]> {
  constructor(private formService: FormService) {}

  resolve(route: ActivatedRouteSnapshot): Promise<Page[]> {
    return this.formService.findRoutes();
  }
}

2. 修改路由配置，关联守卫：

const routes: Routes = [{
  path: 'data/some-url',
  component: SomeComponent,
  resolve: {
    children: ChildRoutesResolver // 守卫返回的数据会存在data.children里
  },
  data: {
    pages: MENU_PAGES
  }
}];

3. 在组件中获取数据：

@Component({ /* ...组件配置 */ })
export class SomeComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    // 从路由data中获取守卫返回的子路由数据
    this.route.data.subscribe(data => {
      const childRoutes = data.children;
      // 在这里使用childRoutes
    });
  }
}

内容的提问来源于stack exchange，提问作者Hasan Can Saral