Ionic中路由传参获取的any类型如何转换为string类型？

1. 类型转换实现方法 #

你可以通过类型断言+显式转字符串的方式处理any类型的state值，同时建议传递参数时固定对象结构，避免类型混乱：

接收侧代码修改（home.page.ts） #

constructor(public router : Router) {
  // 先做非空判断，避免getCurrentNavigation返回null时报错
  const navigation = this.router.getCurrentNavigation();
  if (navigation?.extras.state) {
    // 方案A：如果你传递的params本身就是纯字符串，直接断言后转string
    this.statusIcon = (navigation.extras.state as string).toString();

    // 方案B（更推荐）：如果你传递的是带key的对象，直接取对应字段，类型更安全
    // this.statusIcon = (navigation.extras.state as {iconUrl: string}).iconUrl;
  }
}

传递侧代码优化（可选，更易维护） #

建议传递参数时固定结构，避免后续类型歧义：

// 把params参数明确为带图片路径的对象类型
pushImageAsParams(pageUrl : string, params : {iconUrl: string}) {
  this.nav.navigateForward(pageUrl, {state : params});
}
// 调用示例：pushImageAsParams('/home', {iconUrl: 'assets/status-success.png'})

2. 图片src修改实现 #

拿到转换后的字符串路径后，直接在home.page.html中绑定到img标签即可：

<!-- home.page.html -->
<img [src]="statusIcon" alt="状态图标">

3. 页面刷新兼容方案 #

Router的state会在页面刷新时丢失，如果需要支持刷新后参数不丢失，可以加localStorage兜底：

// 传递侧新增存储逻辑
pushImageAsParams(pageUrl : string, iconUrl: string) {
  localStorage.setItem('statusIcon', iconUrl);
  this.nav.navigateForward(pageUrl, {state : {iconUrl}});
}

// 接收侧新增兜底逻辑
constructor(public router : Router) {
  const navigation = this.router.getCurrentNavigation();
  if (navigation?.extras.state) {
    this.statusIcon = (navigation.extras.state as {iconUrl: string}).iconUrl;
  } else {
    // 刷新时从本地存储取值，没有则用默认图片
    this.statusIcon = localStorage.getItem('statusIcon') || 'assets/default-icon.png';
  }
}

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