Question

如何在Angular2中验证Route params？例如，我有一条路线：

{path: 'artist/:id', component: ArtistInfoComponent}

我想要的是检查参数id是否是有效数字，如果是，则只显示该组件。否则显示包含错误消息的页面。

我在Angular 2中找到了Route Guards，但我认为这不是进行验证的最佳方式，因为我可以为不同的页面设置许多不同的参数，并为所有这些页面编写单独的Route Guard不是我想要的。

是否有可能为每个路由参数指定正则表达式？

UPD：也许有办法对查询参数进行验证？我的意思是，如果我有这样的网址：/search?q=blablabla&page=2如何检查参数page是否有效？有没有办法在没有警卫的情况下做到这一点？

Answer 1

防护是可行的方法，您可以将验证配置放入路径的data部分，并创建可重复使用的防护，以根据此配置验证参数。

Answer 2

通过使用 ActivatedRoute 服务，您可以获取参数并匹配您拥有的ID列表中的参数。如果匹配，则显示详细信息，否则显示错误消息。

例如：

步骤1：在组件构造函数中注入（传递）ActivatedRoute

constructor(private activtedRoute: ActivatedRoute){}

第2步：

    constructor(private activtedRoute: ActivatedRoute){
     this.activtedRoute.paramMap.subscribe((params: ParamMap) => {
          const routeIdParam = params.get('id');
          if(this.validateId(routeIdParam)){
             // code to display info
                } else {
              // code to show error message!
             }   
           }

validateId(id): Boolean{
  return idArray.find(id); 
}

Angular 2 Route params验证

2 个答案: