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

Question

我希望用户在访问以下网址时导航到相同的组件

https://localhost:4200/Kotak/funds -- with parent route 'Kotak'
https://localhost:4200/Kotak/fund-houses -- with parent route 'Kotak'

https://localhost:4200/funds -- without parent route
https://localhost:4200/fund-houses -- without parent route

这就是我开始定义路线的方法

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

但是当我这样定义它时，它总是需要 url 中的

:fundHouseName

参数，所以这有效

https://localhost:4200/Kotak/funds

但这不是

https://localhost:4200/funds

作为一种解决方案，我可以想到定义两个父路由，其中一个带有参数一，而不像这样

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

但我在想是否有更好的方法可以做到这一点而不重复路线？

比如以某种方式将

:fundHouseName

参数标记为可选？

Answer 1

像这样为孩子定义一个变量

您可以使用子数组的重组来简化下面的路由

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

const routes: Routes = [
    {
        path: ':fundHouseName',
        children: childRoutes
    },
    ...childRoutes
]