Angular中通过URL传递JSON参数，无法读取userName属性的问题求助

我来帮你分析下这个问题，你遇到的Cannot read property 'userName' of null错误，本质是JSON.parse(userInfo)返回了null，导致后续访问属性失败。下面是具体的排查和解决步骤：

可能的原因及对应解决方案 #

1. URL中的JSON参数未正确编码 #

URL里直接传递未编码的JSON字符串会导致浏览器自动转义特殊字符（比如空格、双引号），使得你获取到的userInfo是不完整或无效的JSON，最终JSON.parse解析失败返回null。

解决方法：
确保传递userInfo参数时，先使用encodeURIComponent()对JSON字符串进行编码。比如生成链接时应该这样处理：

const userInfoData = { /* 你的目标JSON数据 */ };
const userInfoStr = JSON.stringify(userInfoData);
const encodedUserInfo = encodeURIComponent(userInfoStr);
const url = `http://10.20.30.40/abc?userInfo=${encodedUserInfo}`;

在Angular代码中，queryParamMap.get()会自动帮你解码参数，不需要手动处理。

2. 代码中未处理参数不存在或解析失败的边界情况 #

即使参数编码正确，也可能存在参数未传递、传递为空的情况，直接调用JSON.parse会报错或返回null。这里给你优化后的TS代码，增加了错误处理：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  newObj: any;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.queryParams.subscribe(queryParams => {
      // 直接从订阅的queryParams中获取参数，比snapshot更能响应参数变化
      const userInfo = queryParams['userInfo'];
      
      // 先判断参数是否存在
      if (!userInfo) {
        console.error('userInfo参数未传递');
        return;
      }

      try {
        this.newObj = JSON.parse(userInfo);
        // 检查解析后的对象是否包含userName字段
        if (this.newObj?.userName) {
          console.log('获取到的用户名:', this.newObj.userName);
        } else {
          console.error('解析后的JSON数据中不存在userName字段');
        }
      } catch (error) {
        console.error('JSON解析失败，请检查参数格式:', error);
      }
    });
  }
}

3. 模板中使用可选链避免渲染报错 #

在模板中展示userName时，建议使用可选链操作符（?.），避免newObj未初始化或为null时抛出错误：

<div *ngIf="newObj">
  当前用户名：{{ newObj?.userName }}
</div>

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