Angular 11 如何将服务端返回的路由动态添加到app-routing.module

问题原因 #

1. 路由加载时机错误：Angular路由的核心匹配规则会在应用初始化阶段完成生成，如果你在构造函数中通过异步请求（包括setTimeout、接口请求）延后添加路由，此时初始路由规则已生效，新增路由无法被识别。
2. 路由位置错误：绝大多数Angular项目会在路由数组末尾配置path: '**'的通配符404路由，如果你把动态路由直接push到数组末尾，会被通配符路由优先匹配，导致新路由永远无法触发。
3. 调用逻辑错误：你原代码中在遍历router.config的循环内重复调用resetConfig，同时一边修改配置数组一边遍历，会导致路由规则生成混乱，即使配置数组能看到新增项也不会生效。

解决方案 #

方案1：应用启动前预加载动态路由（最稳妥） #

通过Angular提供的APP_INITIALIZER令牌，在应用启动完成前就从后端拉取路由配置，提前写入路由规则，避免异步后续添加的问题：

// app.module.ts
import { APP_INITIALIZER, NgModule } from '@angular/core';
import { Router } from '@angular/router';
import { ContactsService } from './contacts.service';
import { SettingsPageComponent } from './settings-page/settings-page.component';

// 路由预加载工厂函数
function loadDynamicRoutes(router: Router, service: ContactsService) {
  return () => service.getContacts().toPromise()
    .then(contacts => {
      // 处理菜单数据生成路由数组
      const dynamicRoutes = contacts.menu.map(item => ({
        path: item.path, // 替换为你菜单中对应路径的字段名
        component: SettingsPageComponent,
        // 可按需添加canActivate、data等配置
      }));
      const originalRoutes = router.config;
      // 找到通配符路由的位置，把动态路由插到它前面
      const wildcardIndex = originalRoutes.findIndex(route => route.path === '**');
      if (wildcardIndex > -1) {
        originalRoutes.splice(wildcardIndex, 0, ...dynamicRoutes);
      } else {
        originalRoutes.push(...dynamicRoutes);
      }
      // 重置路由配置
      router.resetConfig(originalRoutes);
    });
}

@NgModule({
  // 其他模块导入、声明配置保持不变
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: loadDynamicRoutes,
      deps: [Router, ContactsService],
      multi: true
    }
  ]
})
export class AppModule {}

方案2：运行时动态添加路由 #

如果需要在应用运行过程中（比如用户新建自定义菜单后）新增路由，使用以下逻辑即可：

// 业务代码中，拿到新的路由信息后调用
addCustomRoute(routePath: string) {
  const newRoute = {
    path: routePath,
    component: SettingsPageComponent
  };
  const currentRoutes = this.router.config;
  // 同样要插到通配符路由前
  const wildcardIdx = currentRoutes.findIndex(r => r.path === '**');
  if (wildcardIdx > -1) {
    currentRoutes.splice(wildcardIdx, 0, newRoute);
  } else {
    currentRoutes.unshift(newRoute);
  }
  // 仅需调用一次resetConfig即可
  this.router.resetConfig(currentRoutes);
}

注意事项 #

• 动态绑定的组件需要提前在对应模块中声明、导入，如果是懒加载场景需要配置正确的loadChildren逻辑。
• 不要直接修改router.config后不调用resetConfig，也不要在循环中重复调用resetConfig。
• 如果路由携带参数，需要在path配置中按照Angular路由规则声明参数占位符（比如path: 'detail/:id'）。

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