在角度路径中传递对象时出现克隆错误

在 Angular 中，通过路由传递对象时，通常会遇到一些限制和问题。Angular 路由参数只支持字符串类型，因此直接传递对象会导致克隆错误或其他问题。为了传递复杂对象，你可以考虑以下几种方法：

方法一：使用 JSON 字符串

你可以将对象序列化为 JSON 字符串，然后在目标组件中反序列化。

传递对象

import { Router } from '@angular/router';

constructor(private router: Router) {}

navigateWithObject() {
  const myObject = { key: 'value', anotherKey: 'anotherValue' };
  this.router.navigate(['/target-route', { data: JSON.stringify(myObject) }]);
}

接收对象

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.params.subscribe(params => {
    if (params['data']) {
      const myObject = JSON.parse(params['data']);
      console.log(myObject);
    }
  });
}

方法二：使用服务

你可以使用 Angular 服务来共享数据，这样可以避免在 URL 中传递复杂对象。

创建服务

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private data: any;

  setData(data: any) {
    this.data = data;
  }

  getData() {
    return this.data;
  }
}

传递对象

import { Router } from '@angular/router';
import { DataService } from './data.service';

constructor(private router: Router, private dataService: DataService) {}

navigateWithObject() {
  const myObject = { key: 'value', anotherKey: 'anotherValue' };
  this.dataService.setData(myObject);
  this.router.navigate(['/target-route']);
}

接收对象

import { DataService } from './data.service';

constructor(private dataService: DataService) {}

ngOnInit() {
  const myObject = this.dataService.getData();
  console.log(myObject);
}

方法三：使用 Query Params

你可以将对象序列化为 JSON 字符串，并通过查询参数传递。

传递对象

import { Router } from '@angular/router';

constructor(private router: Router) {}

navigateWithObject() {
  const myObject = { key: 'value', anotherKey: 'anotherValue' };
  this.router.navigate(['/target-route'], { queryParams: { data: JSON.stringify(myObject) } });
}

接收对象

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.queryParams.subscribe(params => {
    if (params['data']) {
      const myObject = JSON.parse(params['data']);
      console.log(myObject);
    }
  });
}