【问题标题】：Angular 2 Routing based on query params基于查询参数的Angular 2路由
【发布时间】：2017-07-07 02:05:48
【问题描述】：

Angular 2 中是否可以根据查询参数定义路由？我希望有以下行为：

如果用户输入 url http:<server-path>/search 我想路由到 StartPage 组件。

如果用户输入 url http:<server-path>/search?query=sometext 我想路由到 ResultList 组件。

我知道可以使用 path 参数进行路由，但这不是我喜欢做的。如果可能，我想使用 query 参数。我知道如何使用查询参数触发角度导航，但我不知道如何配置路由。

【问题讨论】：

【解决方案1】：

因此，您不能在其中定义带有查询字符串的path，但您可以改用路由matcher 并确定何时路由到ResultList 组件。您在search 的默认路由定义上方定义此内容，这样如果匹配失败，它将默认为没有查询字符串的搜索路由。

{
    component: ResultListComponent,
    matcher: (url: UrlSegment[]) => {
      console.log(url);
      return url.length === 1 && url[0].path.indexOf('search?query=') > -1 ? ({consumed: url}) : null;
    }
},
{
    path: 'search',
    component: SearchComponent,
}

Demo

【讨论】：

在您的示例中，您实际上并未使用查询参数，而是将“query=example”包含在路径中。编码后的实际url是/search%3Fquery%3Dexample而不是/search?query=example。因此，您的回答没有回答原始问题。
在 Angular 5 中，没有查询字符串到达 path 属性。尽管如此，您仍然可以使用 window.location.href 作为后备。如果没有更好的主意...

【解决方案2】：

在下面的代码中，我将展示如何跨任何路由传递查询字符串参数。

假设我们想要以下网址：

http://localhost:4200/myUrl?QueryParamEx=2258

在您的构造函数中注入 ROUTER 依赖项

constructor(...private router: Router..){...}

导航功能将允许我们导航到前面的 url

goMyUrl() {
  this.router.navigate(['/myUrl'], { queryParams: { QueryParamEx: '2258' } });
}

【讨论】：