angular2/4 中的可枚举路由参数答案

【问题标题】：Enumerable Route Params in angular2/4angular2/4 中的可枚举路由参数
【发布时间】：2018-09-24 11:16:09
【问题描述】：

我们能否严格动态路由参数以仅接受我们预定义的值。假设我有以下路线：

  {
    path: ":searchType",
    loadChildren: 'app/website/search.module#SearchModule'
  },

现在我要做的是定义:searchType 可以拥有的值数组。他们有这样的方法吗：/:searchType(a|b|c|d|e)

【问题讨论】：

您要解决的问题是什么？那个人无法访问，例如路线z?

标签： angular routing angular2-routing

【解决方案1】：

我在之前的项目中使用过这个解决方案。

const routes:Routes = [
{path:'home', component: HomeComponent},
{matcher: customUrlMatcher, loadChildren: path}
]

function customUrlMatcher(url: UrlSegment[], group: UrlSegmentGroup, route: Route){
 if(url.length){
   const[part1] = url;
   //you can match url here
   if(part1.path =='a')){
        let consumedUrl: UrlSegment[] = [];
        consumedUrl.push(url[0]);
     return{
        consumed: consumedUrl
   }
 }
}

参考：https://angular.io/api/router/UrlMatcher

另外，我在 stackbliz 上创建了一个示例项目。
https://stackblitz.com/edit/angular-l13udh?file=app%2Fdummy.component.ts

希望对您有所帮助。

【讨论】：

【解决方案2】：

您可以使用CanActivate / CanActivateChild / CanLoad 守卫或它们的任意组合来扩展您的路线（这完全取决于您的用例）。

{
  path: ":searchType",
  canActivate: ['enumerableParamsOnly'],
  canLoad: ['enumerableParamsOnly'],
  loadChildren: 'app/website/search.module#SearchModule'
},

并在提供者中实现所需的行为：

providers: [
  {
    provide: 'enumerableParamsOnly',
    useValue: (route: ActivatedRouteSnapshot) => ['a', 'b', 'c'].includes(route.params['searchType'])
  }
]

（当然，您也可以创建一个“普通”守卫作为服务）。

然后，如果您还想在有人仍然访问可枚举值范围之外的页面时显示某个页面，您可以添加一个简单的重定向。在这种情况下，您需要实现一个真正的守卫，因为您需要注入路由器：

{
  path: ":searchType",
  canActivate: [EnumerableParamsOnlyGuard],
  canLoad: [EnumerableParamsOnlyGuard],
  loadChildren: 'app/website/search.module#SearchModule'
},

和守卫：

class EnumerableParamsOnlyGuard implements CanActivate, CanLoad {

  constructor(private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot) {
    return this.canLoad(route);
  }

  canLoad(route: ActivatedRouteSnapshot) {
    this.router.navigateByUrl('/not-enumerable-param');

    return ['a', 'b', 'c'].includes(route.params['searchType']);
  }

}

【讨论】：