Angular 4 - 路由查询参数导致路径匹配失败答案

【问题标题】：Angular 4 - Route query params cause path match failureAngular 4 - 路由查询参数导致路径匹配失败
【发布时间】：2018-02-10 15:28:00
【问题描述】：

在对 Angular 4 中各种类型的路由搜索多个线程/问题后，我无法解决与将 queryParams 传递给 Angular 4 路由相关的问题。

当传入网址时

http://localhost/search;x=y

通过模板 [queryParams]={x: 'y'}

<a [routerLink]="/search" [queryParams]="{x: 'y'}">Navigate</a>

或在组件类中

this._router.navigate(['/search'], { queryParams: {x: 'y'} });

结果是路由器抛出匹配错误：

Error: Cannot match any routes. URL Segment: 'search%3Fparam1%3Dtest1%26param2%3Dtest2'

将 enableTracing 设置为 true 时，我可以看到导航对可疑字符进行了编码，这很可能是它无法匹配的原因。

我需要处理包含 queryParams 的 url 并解析它们以进行 api 调用，因此查询参数路由必须在必需或可选参数上使用。

有没有人遇到过类似的问题，如果有，编码是问题的根源吗？

【问题讨论】：

你能告诉我们你的路线在定义中的路径吗？应该是{ path: 'search/:x', component: MyComponent}。如果没有，这是你的错误！
不完全。 QueryParams 应该不在路由定义中定义。如果他们是......那么 that 就是问题所在。 :-)

【解决方案1】：

查询参数生成的 url 如下所示：

http://localhost/search?x=y

带问号，而不是分号。

这里总结了如何使用查询参数。

请注意，它们未配置为路由定义的一部分。

您的 routerLink 和 navigate 方法看起来正确。

更新：
确保使用此导入。

import { ActivatedRoute } from '@angular/router';
constructor(private route: ActivatedRoute) {}

【讨论】：

【解决方案2】：

经过深思熟虑，我能够解决这个问题。

我使用 ActivatedRouteSnapshot 将 url（包括查询参数）作为一个整体存储，然后将其传递给路由器。

我应该将查询参数存储在路由的单独对象中并使用传递它们

this._router.navigate(['/search'], { queryParams: paramsObj });

当然，路由匹配失败了，因为它无法匹配所有添加到字符串末尾的查询参数的路由。

【讨论】：

【解决方案3】：

例如，您想添加一个链接，该链接将重定向到具有变量的搜索页面：searchString = 'search'

&lt;a [routerLink]="['/search', searchString]"&gt;Navigate&lt;/a&gt;

在您的组件中，您可以使用 this._router.navigate(['/search', this.searchString]); 创建导航，其中 searchString 在两种情况下都被声明为 const。

【讨论】：

【解决方案4】：

以下代码救了我：

         this.router.navigate(['route-name'], { queryParams: {key:'value'} });

在接收端通过以下方式获取值：（我假设 ActivatedRoute 是注入的地方），

         this.route.queryParams.subscribe(params => {console.log(queryParams['key'])}

或者在模板级别你可以这样写。

 **<a [routerLink]="['/login']" [queryParams]="{ key: 'employer'}" >sign in</a></p>**

注意：路由是ActivatedRoute的一个实例。

【讨论】：