Angular中如何在路由之间传递非字符串类型的自定义对象？

解决方案 #

你可以通过两种常用方式实现需求，根据你的业务场景选择即可： #

方案1：使用路由导航状态state传值（推荐，不暴露在URL中，支持任意类型对象）

这种方式不需要把对象放到URL查询参数里，适合传递敏感/复杂的非字符串对象，不会导致URL过长。

• 跳转时传入自定义对象：
  调用Router.navigate时新增state配置项，把自定义对象放进去：

this.router.navigate(['/files'], {
  queryParams: { location: 'c:/users/xyz/...' },
  state: { customObj: yourCustomObject } // 这里放任意类型的自定义对象
});

• 组件内监听路由跳转并拿值：
  你可以订阅Router.events中的NavigationEnd事件，判断当前路由是/files时就可以拿到状态对象：

import { NavigationEnd, Router } from '@angular/router';
import { filter } from 'rxjs';

constructor(private router: Router) {}

ngOnInit() {
  this.router.events.pipe(
    filter(e => e instanceof NavigationEnd && e.url.startsWith('/files'))
  ).subscribe(() => {
    // 拿到自定义对象，类型和你传入的时候完全一致，不需要转换
    const customObj = this.router.getCurrentNavigation()?.extras.state?.['customObj'];
    // 同时还可以继续从ActivatedRoute拿原有的queryParams参数
    // 你的业务逻辑
  });
}

方案2：序列化对象到queryParams（适合需要把对象同步到URL、可分享场景）

如果你需要用户复制URL就能带走自定义对象参数，可以把对象序列化为JSON字符串放到queryParams里，拿到之后反序列化为原对象：

• 跳转时处理：

this.router.navigate(['/files'], {
  queryParams: {
    location: 'c:/users/xyz/...',
    customObj: JSON.stringify(yourCustomObject)
  }
});

• 组件内订阅处理：
  保持原来订阅ActivatedRoute.queryParams的逻辑，拿到参数后反序列化即可：

this.activatedRoute.queryParams.subscribe(params => {
  const location = params['location'];
  const customObj = params['customObj'] ? JSON.parse(params['customObj']) : null;
  // 业务逻辑
});

注意：方案2只适合轻量对象，大数据/复杂对象序列化后会导致URL过长，被浏览器或服务器截断。

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