在路由中传递对象作为参数将返回[对象对象]

时间:2020-06-09 06:18:36

标签: angular typescript angular-routing angular-router

这在我的routing.module中:

{path: 'hero' component: HeroComponent}

这就是我通过路线传递对象的方式:

this.router.createUrlTree(['/hero', {my_object: this.Obj}]));
window.open(url, '_blank');

在我的英雄组件中,我读取如下对象:

this.route.snapshot.paramMap.get('my_object');

console.log(this.route.snapshot.paramMap.get('my_object');)返回:

[Object object]

并读取对象的属性,例如.id返回:

undefined

如果我尝试使用*ngFor进行迭代,则会得到:

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'string'. NgFor only supports binding to Iterables such as Arrays.

为什么会这样?

1 个答案:

答案 0 :(得分:0)

尝试使用JSON.stringify()

发送字符串
this.router.createUrlTree(['/hero', {my_object: JSON.stringify(this.Obj)}]));

并将其解析回收件人中

this.Obj = JSON.parse(this.route.snapshot.paramMap.get('my_object'));

如果Obj变量是一个对象,则需要使用keyvalue管道通过*ngFor指令对其进行迭代

<ng-container *ngFor="let item of Obj | keyvalue">
  {{ item.key }}: {{ item.value }}
</ng-container>