Question

有没有办法在Angular 2中获得这种网址？

http://www.domain.com/the-route?param[]=value1&param[]=value2&param[]=value3

我正在尝试这样做，使用queryParams和Router，但是当queryParams接受一个对象我不能这样做：

this.router.navigate(['/the-route'], queryParams: { 'param[]': 'value1', 'param[]': 'value2', 'param[]': 'value3' });

因为，当然，我不能在对象中多次使用相同的名称（param[]）

我正在努力如何做到这一点，但找不到方法

我看过这篇文章： Angular 2 pass array to router queryString。但是没有正确的答案

Answer 1

现在不可能这样做。

如果你自己从路由器#save（）开始跟踪路由器代码，你可以看到create_url_tree＃tree（）函数使用字符串化的queryParams构建一个树：

function tree(oldSegmentGroup, newSegmentGroup, urlTree, queryParams, fragment) {
  if (urlTree.root === oldSegmentGroup) {
    return new UrlTree(newSegmentGroup, stringify(queryParams), fragment);
  }
  return new UrlTree(replaceSegment(urlTree.root, oldSegmentGroup, newSegmentGroup), stringify(queryParams), fragment);
}

stringify（）完成所有肮脏的工作：

function stringify(params) {
  var /** @type {?} */ res = {};
  forEach(params, function (v, k) { return res[k] = "" + v; });
  return res;
}

字符串和数组串联的结果是逗号分隔的字符串。

关于多个具有相同名称的查询参数存在一些问题，这些问题已在https://github.com/angular/angular/pull/11373中修复。正如您所看到的，修改后的url_tree＃serializeQueryParams（）完全符合您的需要。但问题是，随着树的构建，序列化将在很晚之后发生。

似乎这是create_url_tree＃tree（）中的一个错误 - 它不应该对查询参数进行字符串化，因为它是url_tree＃serializeQueryParams（）的责任区域。我已经在本地删除了对stringify（）的调用，一切都开始正常工作。

作为解决方法您可以使用JSON.stringify（queryParamArray）手动对每个查询参数进行字符串化，然后再将其发送到路由器#naviagate（）并使用route.queryParams.subscribe（）中的JSON.parse（param）进行解析。 URL看起来很糟糕，但现在它是传递数组的唯一方法。

更新：我在角存储库中创建了该问题：https://github.com/angular/angular/issues/14796

Answer 2

您可以使用导航附加功能希望这可以帮助您：

import { Router, ActivatedRoute, NavigationExtras } from '@angular/router';

function(){
 let extra: any = [];


  let navigationExtras: NavigationExtras = {
      queryParams:extra
    };

 this.router.navigate(['/Questions'], navigationExtras);
}

Answer 3

您可以将它们作为路径命令数组中的项目传递：

{{1}}

另见https://angular.io/docs/ts/latest/guide/router.html#!#query-parameters

Answer 4

您可以这样做：

.Where(x => x.Mtd != null)
.Select(x => x.Mtd.Value)
.ToArray();

当您收到“学生”参数时，您就可以像这样解析它：

let object1 = {
  'name':'Charles',
  'age':21,
}

let params = {
  'student':JSON.stringify(object1),
  'carreer':'law',
}

this.router.navigate(['/the-route'], {queryParams: params});

就是这样！

Answer 5

与此问题没有多大关系，但可能会帮助那些从Google提出此问题的人，并且正在考虑如何将数组传递给routerLink;所以这个答案可能对他们有所帮助。

考虑这个例子：

<a [routerLink]="['news', newsId, newsTitle]">

第一项（news）是一个文本，因为它在引号内，而其他两项是可能在ngFor

内的变量

Angular 2，如何使用queryParams将数组传递给路由器

5 个答案: