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

问题描述：

在Angular 4中搜索多个线程/问题后，我无法解决与传递queryParams到Angular 4路由有关的问题。Angular 4 - 路径查询参数导致路径匹配失败

当通过任一到URL

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，并解析它们的API调用，所以查询参数路由必须使用所需或可选参数。

有没有人有类似的问题，如果是的话，是编码问题的根源（ahem。）原因？

你能告诉我们你的路线在定义路径吗？它应该是'{path：'search /：x'，component：MyComponent}'。如果没有，这是你的错误！ – trichetriche

不完全。 QueryParams应该不**在路由定义中定义。如果他们是...那么*那*是问题。 :-) – DeborahK

答

查询参数导致URL看起来像这样：

http://localhost/search?x=y

一个问号，而不是一个分号。

下面是如何使用查询参数的摘要。

注意，他们是不配置为路由定义的一部分。

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

你的router.navigate调用在错误的地方有方括号，需要是['/ products']，{etc ...}。 – Matt

你说得对。我已经修复它在这篇文章中：https://*.com/questions/44864303/sending-data-with-route-navigate-in-angular-2/44865817#44865817但错过了这一个。 – DeborahK

答

经过一番商议，我能够解决这个问题。

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

我应该存储在查询参数在一个单独的对象路线和使用过它们

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

当然路径一致失败，因为它不能匹配添加了所有查询参数的路线到字符串的末尾。

答

例如，要添加一个链接，将重定向到具有可变搜索页面：搜索字符串=“搜索”

<a [routerLink]="['/search', searchString]">Navigate</a>

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