Ionic/Angular：无法从Snapshot QueryParams获取对象属性的问题

我希望从路由快照的queryParams中获取对象的name属性，而非完整的数据对象。我的实现代码如下：

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-item',
  templateUrl: './item.page.html',
  styleUrls: ['./item.page.scss'],
  standalone: true,
  imports: [IonicModule, CommonModule, FormsModule]
})
export class ItemPage implements OnInit {

  id:any;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.id = this.route.snapshot.paramMap.get('id')
    const data = this.route.snapshot.queryParams;
    console.log(JSON.stringify(data))
  }
}

控制台输出如下：

{"data":"{\"name\":\"abs\",\"id\":1}"}

我无法通过JSON.stringify(data?.data)获取完整数据，同时也无法通过以下代码访问name属性：

const currentObject = JSON.stringify(data.data); 
console.log(currentObject.name);

解决方案 #

问题核心是queryParams.data是JSON格式的字符串，不是直接的JavaScript对象。你之前用JSON.stringify()是把数据转为字符串，属于反向操作，正确做法是用JSON.parse()把字符串解析为对象，之后就能正常访问name属性。

修正后的代码：

ngOnInit() {
  this.id = this.route.snapshot.paramMap.get('id');
  const queryParams = this.route.snapshot.queryParams;
  // 将字符串化的data解析为JavaScript对象
  const parsedData = JSON.parse(queryParams.data);
  // 直接访问name属性
  const targetName = parsedData.name;
  console.log(targetName); // 输出 "abs"
}

关键说明 #

• queryParams.data的值是"{\"name\":\"abs\",\"id\":1}"，这是被转义的JSON字符串，必须通过JSON.parse()解析后，才能像普通对象一样访问内部属性。
• 你之前的JSON.stringify(data.data)会把这个字符串再次转为字符串，得到"\"{\\\"name\\\":\\\"abs\\\",\\\"id\\\":1}\""，这种嵌套字符串自然无法通过.name获取属性。

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