Angular如何跨组件传递对象数组？路由传参接收为undefined怎么办

你现在的代码有3个核心错误，才会导致拿到undefined：

• 传参写法完全错误：queryParams是navigate方法的第二级配置属性，你现在把包含queryParams的对象直接塞进了路由路径数组里，相当于把它当成了路径片段参数，根本不会被解析成查询参数。
• 参数类型不匹配：Angular路由的query参数本质是URL拼接的字符串键值对，不支持直接传递对象、数组这类复杂结构，直接传会被默认转成无意义的[object Object]字符串，数据直接丢失。
• 异步时序错误：queryParamMap.subscribe是异步执行逻辑，你把console.log写在了subscribe回调外面，打印执行的时候参数赋值逻辑还没触发，自然拿不到值。

根据你的数据大小和敏感度选对应方案即可：

方案1：小体量非敏感数据用queryParams传 #

需要先把对象数组序列化成JSON字符串再传，接收端反序列化还原，所有逻辑写在subscribe回调内部。
发送端修正代码：

irAlCarrito():void{
  // queryParams是navigate的第二个配置项，不要塞到路径数组里
  this.router.navigate(['/carrito'], {
    queryParams: {
      // 把对象数组转成JSON字符串传递
      carrito: JSON.stringify(this.carrito)
    }
  });
}

接收端修正代码：

ngOnInit(): void {
  this.router.queryParamMap.subscribe(params => {
    const carritoRaw = params.get('carrito');
    // 反序列化还原成对象数组，做兜底判空
    this.carrito = carritoRaw ? JSON.parse(carritoRaw) : [];
    // 打印逻辑必须写在回调内部，等赋值完成再执行
    console.log(this.carrito);
  });
}

方案2：大体量/敏感数据用路由state传（推荐） #

URL有长度限制，且query参数会直接暴露在地址栏，如果你的购物车数据较多、不想让用户直接看到参数，用路由状态传参更合适，不需要序列化，支持直接传复杂结构。
发送端代码：

irAlCarrito():void{
  this.router.navigate(['/carrito'], {
    state: {
      carrito: this.carrito
    }
  });
}

接收端代码：

ngOnInit(): void {
  // 直接从历史记录状态里取数据即可
  this.carrito = history.state.carrito || [];
  console.log(this.carrito);
}

内容的提问来源于stack exchange，提问作者Luis Rosúa