Angular 4路由间传参异常：接收数据显示为[object Object]

嘿，我看到你在Angular 4路由传参时遇到了对象显示成[object Object]的问题，这其实是个很常见的坑——你用了路由参数（params）来传递对象，但路由参数本质上是URL的一部分，只能存储字符串类型，直接传对象会被自动调用toString()方法转成[object Object]，所以接收端自然拿不到正确的数据。

下面给你两种可行的解决办法，你可以根据场景选择：

方法一：用路由data属性传递（推荐非URL暴露场景） #

如果你的数据不需要出现在URL里，用路由的data字段是最直接的方式，它支持直接传递对象：

跳转组件的代码修改 #

// 假设你要传递的products对象示例
const products: Products = { 
  // 你的对象属性，比如id: 1, name: "Product A"等
};

// 调用navigate时用data字段传参
this.route.navigate(['/fill-request'], {
  data: { objectProducts: products }
});

接收组件（FillRequestComponent）的代码修改 #

export class FillRequestComponent implements OnInit { 
  constructor(private route: Router, private dataRoute: ActivatedRoute) { } 

  ngOnInit() { 
    // 从dataRoute.snapshot.data中获取，而不是params
    const key: Products = this.dataRoute.snapshot.data['objectProducts']; 
    console.log(key); // 现在能正确打印对象内容了
  } 
}

方法二：对象转JSON字符串传递（适合需要URL保留数据的场景） #

如果必须把数据放在URL里（比如刷新页面后还能拿到数据），可以把对象序列化为JSON字符串传递，接收时再解析：

跳转组件的代码修改 #

const products: Products = { /* 你的对象数据 */ };
// 把对象转成JSON字符串
const productsJson = JSON.stringify(products);
this.route.navigate(['/fill-request', { objectProducts: productsJson }]);

接收组件的代码修改 #

export class FillRequestComponent implements OnInit { 
  constructor(private route: Router, private dataRoute: ActivatedRoute) { } 

  ngOnInit() { 
    // 先拿到URL里的字符串，再解析成对象
    const productsJson = this.dataRoute.snapshot.params['objectProducts'];
    const key: Products = JSON.parse(productsJson);
    console.log(key);
  } 
}

⚠️ 注意：这种方式会把对象内容暴露在URL中，所以不适合传递大对象或敏感数据，同时要确保你的对象没有循环引用（否则JSON序列化会失败）。

为什么你的原代码会出问题？ #

你之前用this.dataRoute.snapshot.params['objectProducts']获取数据，但params对应的是URL中的参数，当你直接把对象传给navigate的参数时，Angular会自动把对象转为[object Object]字符串，所以你打印出来的就是这个转义后的结果，而不是原来的对象。

内容的提问来源于stack exchange，提问作者Kenry Sanchez