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调用，因此必须在必需或可选的params上使用查询param路由。

是否有人遇到过类似的问题？如果有的话，编码是问题的根源（ahem。）？

Answer 1

查询参数会产生如下所示的网址：

http://localhost/search?x=y

带问号，而不是分号。

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

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

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

Answer 2

经过一番考虑，我能够解决这个问题。

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

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

传递它们

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

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

Answer 3

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

cli() {
  this.imgg;
  console.log(this.imgg);
}

在您的组件中，您可以使用<a [routerLink]="['/search', searchString]">Navigate</a>创建导航，其中searchString在两种情况下都被声明为const。

Answer 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>**

注意：route是ActivatedRoute的一个实例。