在 Angular 中,通过路由传递对象时,通常会遇到一些限制和问题。Angular 路由参数只支持字符串类型,因此直接传递对象会导致克隆错误或其他问题。为了传递复杂对象,你可以考虑以下几种方法:
你可以将对象序列化为 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);
}
你可以将对象序列化为 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);
}
});
}
领取专属 10元无门槛券
手把手带您无忧上云