Angular路由跳转传递对象后获取值为undefined的解决方法

问题根源：Angular的queryParams会自动将传入的对象转换为字符串，直接传递Order实例会被序列化为[object Object]，接收方拿到的是字符串而非对象，因此访问属性时返回undefined。

正确实现步骤 #

1. 发送页面：将对象序列化为JSON字符串传递

修改跳转逻辑，用JSON.stringify()把Order对象转为JSON字符串，作为queryParams的一个属性传递：

goToOrderPage(){
  // 创建Order对象
  let order = new Order("BTWNummer", "mail", this.totalPrice, this.sendCosts, orderlineset);
  console.log(
    "before send" + 
    order.btw + " - " + order.totalPrice + " - " + order.shippingcost + " - " + order.email
  );
  // 序列化对象为JSON字符串后传递
  this.router.navigate(["/orderinfo"], { 
    queryParams:  { order: JSON.stringify(order) } 
  });
}

2. 接收页面：解析JSON字符串为对象

在接收组件中，用JSON.parse()把获取到的JSON字符串转回对象，再赋值给order变量。如果需要严格的Order实例（比如要调用类的自定义方法），可以用Object.assign将属性赋值给新的Order实例：

export class OrderinfoComponent implements OnInit {
  order!: Order;
  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    this.route.queryParams.subscribe(params=> {
      console.log(params);
      // 解析JSON字符串为普通对象
      const rawOrder = JSON.parse(params['order']);
      // 转换为Order实例（若不需要实例方法，直接赋值rawOrder即可）
      this.order = Object.assign(new Order(), rawOrder);
      console.log(
        this.order.btw + " - " + this.order.totalPrice + " - " + this.order.shippingcost + " - " + this.order.email
      );
    })
  }
}

可选优化：用路由状态传递对象（更适合大对象） #

如果Order对象体积较大，不适合暴露在URL中，可以改用路由的state参数传递：

• 发送页面：

this.router.navigate(["/orderinfo"], { state: { order: order } });

• 接收页面：

ngOnInit(): void {
  this.order = history.state.order;
  console.log(this.order.btw, this.order.totalPrice);
}

这种方式不会把参数显示在URL里，也无需序列化/反序列化，更简洁安全。

内容的提问来源于stack exchange，提问作者Yannick Mussche