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 可以通过路由参数传递对象吗？