Angular路由传递对象时出现DataCloneError克隆错误该如何解决？

报错根本原因 #

Angular路由的state参数最终会存入浏览器History API的state字段，该字段的内容必须符合结构化克隆算法的序列化要求，以下场景都会触发克隆失败报错：

• 你当前代码直接将ErrorJsonDTO类本身（本质是构造函数）传入了state，结构化克隆算法不支持序列化函数类型，这是你本次报错的直接原因
• 就算传入类的实例，如果类包含自定义方法、getter/setter访问器、原型链上存在非可序列化内容，或是对象存在循环引用，也会触发相同错误

修复方案 #

方案1：传入类的实例而非类本身 #

先实例化DTO并完成字段赋值，再传递实例对象：

// 实例化DTO并赋值字段
const errorDto = new ErrorJsonDTO();
errorDto.excepcionProducida = true;
errorDto.errorDescripcion = "接口调用失败";
// 其余字段赋值...

// 传递实例
const errorJsonNav: NavigationExtras = {state:{errorJson: errorDto}};
this.router.navigate(['error'], errorJsonNav);

方案2（更稳妥）：传递普通字面量对象 #

避免类原型带来的序列化兼容问题，直接传普通对象，接收侧可以手动转成类实例：

// 传参页
const errorJson = {
  excepcionProducida: true,
  errorDescripcion: "接口调用失败",
  codigoIncidencia: "ERR001",
  // 其余字段...
}
const errorJsonNav: NavigationExtras = {state:{errorJson}};
this.router.navigate(['error'], errorJsonNav);

// 接收页转成DTO实例
const rawError = this.router.getCurrentNavigation()?.extras.state?.['errorJson'];
const errorDto = Object.assign(new ErrorJsonDTO(), rawError);

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