Angular 2 路由参数验证答案

【问题标题】：Angular 2 Route params validationAngular 2 路由参数验证
【发布时间】：2016-12-25 21:10:51
【问题描述】：

如何在 Angular2 中验证路由参数？例如，我有一条路线：

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

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

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

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

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

【问题讨论】：

这里没有太多帮助，但一个快速的谷歌给出了这个：github.com/angular/angular/issues/12442 似乎现在无法使用正则表达式（？？）除非你找到一些关于那个神秘的信息 urlMatcher这是提到的。但正如所说，我不知道，只是找到了这个页面:)

标签： validation angular

【解决方案1】：

Guards 是要走的路，你可以将验证配置放入路由的data 部分，并创建可重用的guard 来基于此配置验证参数。

【讨论】：

不错的答案！谢谢
好的，但也许有办法对查询参数进行验证？我的意思是如果我有这样的网址：/search?q=blablabla&page=2 我如何检查参数page 是否有效？没有Guards有没有办法做到这一点？
Router 负责处理位置变化，因此它是进行验证的正确位置。您还可以验证组件中的参数并使用路由器手动重定向，以防参数无效。

【解决方案2】：

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

例子：

步骤一：在组件构造函数中注入（通过）ActivatedRoute

constructor(private activtedRoute: ActivatedRoute){}

第二步：

    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); 
}

【讨论】：