2016-08-31 36 views
15

我有一個要求來設置一個URL查詢參數如/Questions?id=1234&pageid=0。我試圖通過router.Navigate['/Questions?id=1234&pageid=0']做到這一點,但沒有運氣。如何設置查詢參數到URL Angular2?

導航後瀏覽器顯示如/Questions%3Fid%3D1234%26pageid%3D0

我也嘗試過設置routerLink="/Questions?id=1234&pageid=0",但結果相同。

請提出任何解決它。我做我使用RC5angular2

+1

檢查角文檔與查詢參數的路由:https://angular.io/docs/ts/latest/guide/router.html#! #query-parameters – ranakrunal9

回答

10

我發現通過給路由器鏈路和查詢參數分開,像下面的一個解決方案:

<a [routerLink]="['/Questions']" [queryParams]="{id:1234,page:1}"></a>

這是工作對我罰款。

+1

乾杯!爲此搜索了很久。 [文檔](https://angular.io/docs/ts/latest/guide/router.html#!#query-parameters)似乎是錯誤的?但是,正確的方法隱藏在[cheatsheet](https://angular.io/docs/ts/latest/guide/cheatsheet.html)! – Leo

5

您可以將它們作爲路由器項目命令數組:

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

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

+1

我正在使用它,但它給了我像** /問題的網址; queryParams =%5Bobject%20Object%5D **。 –

+0

對於根路由器可選參數在查詢字符串中表示,對於子路由器,它們被添加爲矩陣參數(您顯示的內容) –

+0

是的,您是對的,它是針對子路由的。那麼,有沒有解決方案來顯示子路由的查詢參數,而不是這個矩陣參數? –

16

您可以將它們作爲路由器項目,但命令陣列外:

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

這會產生你想要什麼:/Questions?id=1234&pageid=0

或者你可以programmaticaly使用它:

this.router.navigate(['/Questions'], { queryParams: {id:1234, pageid:0} })

路由器是的實例的Router

0

你需要更新你的router.navigate

this.router.navigate(['/Quetions', {id: 1234, pageid: 0}]);