角2，如何通过一个数组来使用queryParams

路由器是否有某种方式来获得这种URL的角2？角2，如何通过一个数组来使用queryParams

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。但目前还没有正确答案

来源

2017-02-23 Antop

我认为这个问题应是;你为什么想要这种格式的参数？路由器naviagtion仅用于本地导航，此链接（带参数）永远不会在服务器上结束。你确定你正在寻找本地导航？或者你想在这里做一个服务器调用（然后我可以理解数组格式）？ – MikeOne

是的MikeOne，我想通过服务来调用服务器以检索一些json数据 – Antop

通过服务？好的。您正在此处导航到可能使用组件的设置路线。服务（你的意思是在这里的Angular服务？）在哪里发生？我的意思是，如果你的服务器期望这种GET格式，你应该在服务中解决。路由器调用会将这些数据路由到另一个组件，在那里你将不得不再次分析它等等。也许我不明白你想在这里实现什么...... – MikeOne

您可以将它们作为路由器项目命令数组：

[routerLink]="['/Questions', {queryParams: {id:1234, pageid:0}} ]"

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

来源

2017-02-23 09:57:15

对不起Rakesh，我想在组件内部做，而不是在模板中。无论如何，这正是我所做的，通过一个对象将queryParams传递给路由器 – Antop

有没有可能现在这样做的权利。

如果您跟踪路由器代码，自己从路由器＃导航（）开始时，你可以看到，create_url_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); 
}

和字符串化（）执行所有肮脏的工作：

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＃树中的bug（） - 它不应该字符串化查询参数，因为它是url_tree＃serializeQueryParams的责任（）的区域。我已经删除调用字符串化（）在本地和一切开始工作，因为它应该。

由于变通方法，您可以将其发送到路由器＃naviagate（），并用JSON.parse（PARAM）在route.queryParams.subscribe（）解析它之前JSON.stringify（queryParamArray）手动字符串化每个查询参数。 URL看起来很可怕，但现在它是传递数组的唯一方法。

更新：我创造了角库中的问题：https://github.com/angular/angular/issues/14796

来源

2017-02-28 09:44:17

感谢您的帮助@ alexander-pisarev！我一直在等待问题的解决 – Antop

您可以使用导航演员希望这可以帮助你：

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

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


    let navigationExtras: NavigationExtras = { 
     queryParams:extra 
    }; 

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

来源

2017-02-28 09:56:34

-1

没有一个相关的问题很多，但可能会帮助那些来自Google的人提出这个问题，并且正在研究如何将数组传递给routerLink;所以这个答案可能会帮助他们。

考虑这个例子：

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

的第一项（news）是一个文本，因为它的引号内，和其他两个项目是变量，可能是内部的ngFor

来源

2017-11-18 11:44:35 M98

角2，如何通过一个数组来使用queryParams

回答

相关问题