如何在@ui-router/angular模块中加载API返回的动态路由？

核心思路：利用APP_INITIALIZER预加载路由数据 #

你遇到的核心问题是路由配置时机过早，API请求结果赶不上UIRouterModule.forChild的初始化流程。APP_INITIALIZER可以让你在应用初始化阶段（模块加载前）执行异步操作，确保路由数据准备就绪后再启动应用。

具体实现步骤 #

1. 创建路由加载服务
   这个服务封装API调用逻辑，通过依赖注入使用全局HttpClient，确保不会绕过自定义拦截器：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { StateDeclaration } from '@ui-router/angular';

@Injectable({ providedIn: 'root' })
export class RouteLoaderService {
  routes: StateDeclaration[] = [];

  constructor(private http: HttpClient) {}

  loadRoutes(): Promise<StateDeclaration[]> {
    return this.http.get<StateDeclaration[]>('/api/routes')
      .toPromise()
      .then(data => {
        this.routes = data;
        return data;
      });
  }
}

2. 配置模块初始化钩子
   在你的功能模块中，注册APP_INITIALIZER拦截初始化流程，同时在UIRouterModule的配置回调中动态注册路由：

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { UIRouterModule } from '@ui-router/angular';
import { RouteLoaderService } from './route-loader.service';

// 初始化钩子的工厂函数
export function loadRoutesFactory(routeLoader: RouteLoaderService) {
  return () => routeLoader.loadRoutes();
}

@NgModule({
  imports: [
    UIRouterModule.forChild({
      states: [], // 初始留空，后续动态注册
      config: (uiRouter) => {
        // 从UIRouter注入器中获取已加载好路由的服务实例
        const routeLoader = uiRouter.injector.get(RouteLoaderService);
        // 批量注册路由状态
        routeLoader.routes.forEach(state => uiRouter.stateRegistry.register(state));
      }
    })
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: loadRoutesFactory,
      deps: [RouteLoaderService],
      multi: true
    }
  ]
})
export class FeatureModule {}

3. 全局路由场景的简化方案
   如果路由数据是全局可用的，也可以在根模块中直接通过工厂函数传入路由数据：

// 根模块代码
export function getRoutes(routeLoader: RouteLoaderService) {
  return routeLoader.routes;
}

@NgModule({
  imports: [
    UIRouterModule.forRoot({
      states: getRoutes, // 用工厂函数延迟获取路由数据
    })
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: loadRoutesFactory,
      deps: [RouteLoaderService],
      multi: true
    }
  ]
})
export class AppModule {}

关键注意事项 #

• APP_INITIALIZER返回的Promise会阻塞应用初始化，直到路由数据加载完成，确保路由配置时数据已就绪。
• 路由加载服务使用providedIn: 'root'保证单例，避免重复实例化HttpClient，同时确保拦截器生效。
• 在UIRouterModule的config回调中通过uiRouter.injector获取服务，避免提前实例化导致的依赖问题。

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