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

Question

在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调用,因此必须在必需或可选的参数上使用查询参数路由.

有没有人有类似的问题,如果有的话,编码根源(ahem.)问题的原因是什么？

Answer 1

查询参数会生成如下所示的网址:

http://localhost/search?x=y

带问号,不是分号.

以下是有关如何使用查询参数的摘要.

请注意,它们未配置为路径定义的一部分.

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

Answer 2

经过一番考虑,我能够解决这个问题.

我使用ActivatedRouteSnapshot作为整体存储url(包括查询参数),然后将其传递给路由器.

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

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

当然路由匹配失败,因为它无法匹配路由,并且所有查询参数都添加到字符串的末尾.