代码之家 › 专栏 › 技术社区 › Flyii

如何将枚举定义为路由参数

angular-routing angular

Flyii · 技术社区 · 7 年前

我正在尝试设置我的路由器,以便它使用 ../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,我将有一个可扩展的解决方案。

也许有一种方法可以使用 route parameters 通过将可能的值限制为枚举。不幸的是,我无法想出一个有效的解决方案。我尝试在这些段上使用保护来检查参数是否是枚举的有效值。也许我只是执行错误。

这是正确的方法吗?如何配置路由以使用给定的segmentenum进行扩展?

2 回复 | 直到 7 年前

user10933473 7 年前

目前还不清楚你将要实现什么。

至少,你的代码

{
   path: RouteSegment1.value1/RouteSegment2.value1,
   component: RouteSegment2Component,
},

应该写为

{
    path: RouteSegment1.value1,
    component: RouteSegment1Component,
    children: [
      {
        path: RouteSegment2.value1,
        component: RouteSegment2Component
      }
    ]
  }

Flyii 7 年前

所以我对我的第一种方法做了第二次尝试,我设法使它工作起来。

我定义了我的分段数

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],
      },
    ],
  },
];