Angular 16特征模块路由如何复用枚举定义的路径？

核心原因 #

特征模块的路由属于相对路由，主路由中path: 'machines'已经作为父路径，因此特征模块内的路径不能重复前缀machines/，否则会生成machines/machines/details/xxx这类无效路径。

方案1：拆分枚举，分离父路径与子路径 #

直接在枚举中同时维护父路径和子路径，让两个路由模块各自取用对应部分：

// 路由枚举定义
export enum AppRoutes {
    // 其他路由...
    UserMachinesBase = 'machines', // 主路由用的父路径
    UserMachinesDetails = 'details/:machineNumber', // 特征模块用的子路径
    UserMachinesDetailsFull = 'machines/details/:machineNumber' // 可选：全路径，用于模板跳转
}

分别在两个路由模块中使用：

// app-routing.module.ts
{
    path: AppRoutes.UserMachinesBase,
    loadChildren: () =>
        import('./app-machines.module').then(m => m.AppMachinesComponentsModule)
}

// app-machines-routing.module.ts
RouterModule.forChild([
    {
        path: '',
        component: MyMachinesPageComponent
    },
    {
        path: AppRoutes.UserMachinesDetails,
        component: MachineDetailPageComponent
    }
])

方案2：用工具函数提取子路径（保留全路径枚举） #

如果希望枚举只保留完整路径（方便模板中直接使用全路径跳转），可以写一个简单的工具函数从全路径中剥离父前缀：

// 路由枚举定义
export enum AppRoutes {
    // 其他路由...
    UserMachines = 'machines',
    UserMachinesDetails = 'machines/details/:machineNumber'
}

// 工具函数：从全路径中提取相对子路径
export function getChildRoute(fullRoute: string, parentPrefix: string): string {
    return fullRoute.startsWith(`${parentPrefix}/`) 
        ? fullRoute.slice(parentPrefix.length + 1) 
        : fullRoute;
}

在特征模块路由中使用：

// app-machines-routing.module.ts
RouterModule.forChild([
    {
        path: '',
        component: MyMachinesPageComponent
    },
    {
        path: getChildRoute(AppRoutes.UserMachinesDetails, AppRoutes.UserMachines),
        component: MachineDetailPageComponent
    }
])

方案3：基于基础常量构建枚举 #

通过单独的基础常量来构建枚举，避免重复书写路径字符串：

// 基础路径常量
const USER_MACHINES_BASE = 'machines';

export enum AppRoutes {
    // 其他路由...
    UserMachines = USER_MACHINES_BASE,
    UserMachinesDetails = `${USER_MACHINES_BASE}/details/:machineNumber`
}

特征模块路由中直接使用子路径部分：

// app-machines-routing.module.ts
RouterModule.forChild([
    {
        path: '',
        component: MyMachinesPageComponent
    },
    {
        path: 'details/:machineNumber', // 或用`AppRoutes.UserMachinesDetails.replace(USER_MACHINES_BASE + '/', '')`
        component: MachineDetailPageComponent
    }
])

注意事项 #

• 模板中跳转时，可以直接使用全路径枚举值，比如：[routerLink]="[AppRoutes.UserMachinesDetails]"，Angular会自动解析正确的路由。
• 确保工具函数的逻辑覆盖边界情况（比如全路径和父路径完全相同的场景）。

内容的提问来源于stack exchange，提问作者Sebastian S.