angular2 RouteParams、序列化和復雜對象或數組

Question

我正在嘗試將對象作為 RouteParam 傳遞

let params = { account: 'revenue', page: 3, conditions: [{foo: 'john'}, {foo: 'kelly'}] // <-- Complex object } this._router.navigate(['Journal', params])

但我得到一個像

http://localhost:3000/journal/revenue/3?conditions=[object%20Object],[object%20Object]

IIRC，angular1 支持使用 JQuery 的 $.param 來回這種類型的序列化（我可能錯了）

有沒有辦法在 angular2 中實現類似的目標？

Answer 1

由於此類參數在 URL 內傳遞，因此您可以使用例如JSON.stringify將它們轉換為字符串，並在您想要訪問它們時使用JSON.parse將它們從路由參數轉換為對象。

let params = { 
  account: 'revenue', 
  page: 3, 
  conditions: JSON.stringify("[{foo: 'john'}, {foo: 'kelly'}]") 
};
this._router.navigate(['Journal', params]);

和

constructor(params:RouteParams) {
  var conditions = JSON.parse(params.get('conditions'));
}

另一種方法是使用共享服務。 您在調用路由之前將對象設置為該服務的一個屬性，並在路由激活后從與該路由對應的組件中獲取它。 您會注意到在引導應用程序時需要定義共享服務，以便能夠為整個應用程序共享單個實例：

bootstrap(AppComponent, [ SharedService ]);

有關更多詳細信息，請參閱此問題：

• Angular 2 可以通過路由參數傳遞對象嗎？