角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

回答

相關問題