在路由中将对象作为参数传递 returns [Object object]

Question

这是我的 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');) returns:

[Object object]

并读取对象的属性例如 .id returns:

undefined

如果我尝试用 *ngFor 迭代它，我得到：

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

为什么会这样？

Answer 1

尝试使用 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>

Passing object as parameter in route returns [Object object]