Angular 9: queryParams正在向路由URL中添加额外的字符

基础概念

Angular 的 queryParams 是一种用于在路由之间传递参数的方式。这些参数会被编码并附加到 URL 中，以便在不同的路由组件之间共享数据。

类型

queryParams 可以传递字符串、数字、布尔值等基本类型，也可以传递对象，但对象会被序列化为 JSON 字符串。

应用场景

在不同的页面之间传递搜索条件。
在用户登录后传递用户信息。
在多步骤表单中传递中间数据。

问题描述

你提到在使用 Angular 9 时，queryParams 正在向路由 URL 中添加额外的字符。这通常是由于参数编码或序列化问题引起的。

原因分析

参数编码问题：URL 中的某些字符需要进行编码，否则会导致 URL 不合法。
对象序列化问题：当你传递一个对象时，它会被序列化为 JSON 字符串，这个过程中可能会引入额外的字符。

解决方法

1. 确保参数正确编码

在传递参数之前，使用 encodeURIComponent 对参数进行编码：

import { Router } from '@angular/router';

constructor(private router: Router) {}

navigateWithParams() {
  const param = 'some value with spaces';
  this.router.navigate(['/target-route'], {
    queryParams: { param: encodeURIComponent(param) }
  });
}

在目标组件中解码：

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.queryParams.subscribe(params => {
    const param = decodeURIComponent(params['param']);
    console.log(param);
  });
}

2. 处理对象参数

如果你需要传递一个对象，确保在目标组件中正确解析 JSON 字符串：

navigateWithObjectParams() {
  const obj = { key: 'value', anotherKey: 'anotherValue' };
  this.router.navigate(['/target-route'], {
    queryParams: { obj: JSON.stringify(obj) }
  });
}

在目标组件中解析：

ngOnInit() {
  this.route.queryParams.subscribe(params => {
    if (params['obj']) {
      const obj = JSON.parse(params['obj']);
      console.log(obj);
    }
  });
}