Question

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

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

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

Answer 1

您可以使用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'])
  }
]

（当然，您可以创建＆＃34;普通＆＃34;保护作为服务）。

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

{
  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']);
  }

}

Answer 2

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

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

希望，这可以帮到你。

在Angle2 / 4

2 个答案: