如何在Angular中定义可选父路由？

需求场景 #

需要让以下URL都导航到对应组件：

• https://localhost:4200/Kotak/funds（带父路由参数Kotak）
• https://localhost:4200/Kotak/fund-houses（带父路由参数Kotak）
• https://localhost:4200/funds（无父路由参数）
• https://localhost:4200/fund-houses（无父路由参数）

初始路由问题 #

最初的路由定义强制要求携带:fundHouseName参数，导致无参数的URL无法匹配：

const routes: Routes = [
    {
        path: ':fundHouseName',
        children: [{
            path: RoutePaths.funds,
            component: FundsComponent,
            canActivate: [AuthGuard]
        },
        {
            path: RoutePaths.fundHouses,
            component: FundHousesComponent,
            canActivate: [AuthGuard]
        }
        ]
    }
]

已有解决方案 #

通过定义两个父路由（一个带参数、一个不带），复用子路由配置来实现需求：

const routes: Routes = [
    {
        path: '',
        children: getChildPaths()
    },
    {
        path: ':fundHouseName',
        children: getChildPaths()
    }
]

// 复用的子路由配置函数
function getChildPaths() {
    return [
        {
            path: RoutePaths.funds,
            component: FundsComponent,
            canActivate: [AuthGuard]
        },
        {
            path: RoutePaths.fundHouses,
            component: FundHousesComponent,
            canActivate: [AuthGuard]
        }
    ]
}

更优实现方式 #

Angular路由本身不支持直接标记路径参数为可选，但可以通过复用子路由数组的方式让配置更直观易维护，本质和你当前方案逻辑一致，但写法更简洁：

1. 先定义独立的子路由数组：

const childRoutes = [
    {
        path: RoutePaths.funds,
        component: FundsComponent,
        canActivate: [AuthGuard]
    },
    {
        path: RoutePaths.fundHouses,
        component: FundHousesComponent,
        canActivate: [AuthGuard]
    }
];

2. 再配置根路由，同时匹配无参数和带参数的情况：

const routes: Routes = [
    // 匹配无父路由参数的URL
    { path: '', children: childRoutes },
    // 匹配带父路由参数的URL
    { path: ':fundHouseName', children: childRoutes }
];

如果需要在组件中统一处理参数存在/不存在的情况，可以通过ActivatedRoute的paramMap监听：

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit() {
    this.route.paramMap.subscribe(params => {
        const fundHouseName = params.get('fundHouseName');
        if (fundHouseName) {
            // 处理带参数的业务逻辑
        } else {
            // 处理无参数的业务逻辑
        }
    });
}

注意：Angular路由会按配置顺序匹配，要确保空路径路由不会干扰其他根路由的匹配，建议将这类通用路由放在配置的靠后位置。

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