Angular 如何将枚举定义为路由参数
我正在尝试设置路由器,以便它使用Angular 如何将枚举定义为路由参数,angular,angular-routing,Angular,Angular Routing,我正在尝试设置路由器,以便它使用。/RouteSegment1/RouteSegment2/。 enum RouteSegment1 { value1, value2 } enum RouteSegment2 { value1, value2 } 一个有效的解决方案是像这样明确地定义每个路由 const routes: Routes = [ { path: '', component: ParentComponent, children: [ {
。/RouteSegment1/RouteSegment2/。
enum RouteSegment1 {
value1,
value2
}
enum RouteSegment2 {
value1,
value2
}
一个有效的解决方案是像这样明确地定义每个路由
const routes: Routes = [
{
path: '', component: ParentComponent, children: [
{
path: RouteSegment1.value1,
component: RouteSegment1Component,
},
{
path: RouteSegment1.value2,
component: RouteSegment1Component,
},
{
path: RouteSegment1.value1/RouteSegment2.value1,
component: RouteSegment2Component,
},
{
path: RouteSegment1.value1/RouteSegment2.value2,
component: RouteSegment2Component,
},
{
path: RouteSegment1.value2/RouteSegment2.value1,
component: RouteSegment2Component,
},
{
path: RouteSegment1.value2/RouteSegment2.value2,
component: RouteSegment2Component,
},
]
},
];
正如你所看到的,这绝对不是一个好的解决方案,以后会变得更糟
我的最终目标是这样设置我的路线:
const routes: Routes = [
{
path: '', component: ParentComponent, children: [
{
path: RouteSegment1,
component: RouteSegment1Component,
},
{
path: RouteSegment1/RouteSegment2,
component: RouteSegment2Component,
},
]
},
];
因此,不是枚举值的路由不会路由到RouteSegmentComponents,我会有一个可伸缩的解决方案
也许有一种方法可以通过将可能的值限制到枚举来使用。不幸的是,我没能想出一个有效的解决办法。我尝试在这些段上使用保护来检查参数是否是枚举的有效值。也许我只是实施了这些错误
这是正确的方法吗?我如何配置我的路由,使其可以使用给定的SegmentEnum进行扩展?不清楚您将要实现什么 至少,你的代码
{
path: RouteSegment1.value1/RouteSegment2.value1,
component: RouteSegment2Component,
},
应写为
{
path: RouteSegment1.value1,
component: RouteSegment1Component,
children: [
{
path: RouteSegment2.value1,
component: RouteSegment2Component
}
]
}
因此,我第二次尝试我的第一种方法,我设法使它工作 我定义了我的段枚举
enum RouteSegment1 {
value1,
value2
}
enum RouteSegment2 {
value1,
value2
}
创建了一个守卫
export class EnumRouteGuard implements CanActivate {
constructor(private router: Router) { }
public canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
const segment1: string = next.paramMap.get('routeSegment1')!;
const segment2: string = next.paramMap.get('routeSegment2')!;
const segment1IsEnum = Object.keys(RouteSegment1).find(key => RouteSegment1[key] === segment1);
const segment2IsEnum = Object.keys(RouteSegment2).find(key => RouteSegment2[key] === segment2);
if (!(segment1IsEnum && segment2IsEnum) ) {
this.router.navigate([someOtherRoute]);
return false;
}
return true;
}
}
const routes: Routes = [
{
path: '', component: ParentComponent, children: [
{
path: ':routeSegment1',
component: RouteSegment1Component,
canActivate: [EnumRouteGuard],
},
{
path: ':routeSegment1/:routeSegment2',
component: RouteSegment2Component,
canActivate: [EnumRouteGuard],
},
],
},
];