Angular 15中router useFactory函数调用不稳定问题求助

问题核心 #

你的ROUTES提供器的useFactory函数执行时机不稳定，导致子路由无法生成，最终触发重定向。本质原因是Angular路由配置在模块初始化阶段同步解析，而你的ApplicationContextService数据（installation、shapeList）可能是异步加载的，两者存在时机竞态——工厂函数执行时数据还未就绪，或者模块初始化时机与数据加载不匹配。

解决方案 #

1. 确保ApplicationContextService数据同步就绪 #

如果ApplicationContextService的数据是异步获取的（比如API请求、本地存储读取），必须在路由模块初始化前完成数据加载：

// main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { ApplicationContextService } from './app/applicationContext.service';

platformBrowserDynamic().bootstrapModule(AppModule)
  .then(moduleRef => {
    const contextService = moduleRef.injector.get(ApplicationContextService);
    // 调用异步加载数据的方法，确保数据就绪后再启动应用
    return contextService.loadData();
  })
  .catch(err => console.error(err));

如果数据是静态或可提前获取的，直接在ApplicationContextService中同步初始化即可。

2. 改用路由守卫动态生成子路由 #

若数据必须异步加载，放弃在ROUTES工厂函数中生成子路由，改用CanActivateChild守卫动态添加：

// shape-setup.guard.ts
import { Injectable } from '@angular/core';
import { CanActivateChild, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { ApplicationContextService } from '../applicationContext.service';
import { TriangleSetupComponent } from './shapeSetup/triangleSetup.component';
import { SquareSetupComponent } from './shapeSetup/squareSetup.component';
import { HexagonSetupComponent } from './shapeSetup/hexagonSetup.component';
import { ShapeSetupDataService } from './ShapeSetupData.service';

@Injectable({ providedIn: 'root' })
export class ShapeSetupGuard implements CanActivateChild {
  constructor(private context: ApplicationContextService, private router: Router) {}

  canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    // 数据未就绪时重定向到默认页
    if (!this.context.installation || !this.context.shapeList.length) {
      this.router.navigate(['/default-page']);
      return false;
    }

    // 仅在子路由未生成时执行一次
    const parentRoute = this.router.config.find(r => r.component === ShapeSetupComponent);
    if (parentRoute && (!parentRoute.children || parentRoute.children.length === 0)) {
      const childRoutes = this.context.shapeList.map(shape => {
        let componentType: any;
        switch(shape.shapeType) {
          case "triangle": componentType = TriangleSetupComponent; break;
          case "square": componentType = SquareSetupComponent; break;
          case "hexagon": componentType = HexagonSetupComponent; break;
          default: return null;
        }
        const shapeTextId = shape.label.toLowerCase().replace(/\s/g, "");
        return { 
          path: shapeTextId, 
          resolve: { data: ShapeSetupDataService }, 
          component: componentType 
        };
      }).filter(Boolean);

      parentRoute.children = childRoutes;
      // 重置路由配置，让新路由生效
      this.router.resetConfig(this.router.config);
      console.log("Child routes created");
    }

    return true;
  }
}

修改路由模块，添加守卫：

// ShapeSetupRoutingModule
@NgModule({
  imports: [RouterModule.forChild([{
    path: '', 
    component: ShapeSetupComponent,
    canActivateChild: [ShapeSetupGuard],
    children: []
  }])],
  exports: [RouterModule]
})
export class ShapeSetupRoutingModule { }

3. 关于强制加载提供器 #

Angular提供器是模块初始化时按需加载的，没有直接“强制加载”的方法，但可以通过以下方式确保工厂函数执行：

• 将该路由模块设为根模块的直接依赖，避免懒加载，确保应用启动时就初始化。
• 如果是懒加载模块，确保触发懒加载时ApplicationContextService的数据已经完全就绪。

关键注意事项 #

• 禁止在ROUTES工厂函数中依赖异步数据，路由配置是同步解析的，异步数据就绪前工厂函数已执行完毕。
• 使用router.resetConfig动态修改路由时，要加判断避免重复添加子路由。

内容的提问来源于stack exchange，提问作者Jason K.