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

Posted 2023-02-22

【中文标题】Angular 4 - 路由查询参数导致路径匹配失败

【英文标题】：Angular 4 - Route query params cause path match failure

【发布时间】：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) 

【讨论】：

您的 router.navigate 调用的右方括号在错误的位置，需要是 ['/products']、 等...。

你是对的。我已经在这篇文章中修复了它：***.com/questions/44864303/… 但是错过了这个。

【参考方案2】：

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

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

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

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

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

【参考方案3】：

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

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

在您的组件中，您可以使用 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的一个实例。