Angular 9 如何处理激活的路由参数字段中的符号 (&)

Question

我正在从 url 到 ActivatedRoute queryParams method.It 中获取查询参数 method.It 正常工作 string.But 如果我在查询值，然后将值从'&'中拆分出来，得到'&'之前的字符串position.Example如下：

http://localhost:4200/#/test/APP?cat1=APP1&cat2=A&B%20Test=&cat3=Service 这是 url，我从中获取 cat1、cat2、cat3 值。

constructor(private actRoute: ActivatedRoute){
}
this.actRoute.queryParams.subscribe(params => {
     this.catName1 = params['cat1'];
     this.catName2 = params['cat2'];
     this.catName3 = params['cat3'];
     console.log(this.catName1, this.catName2);
})

this.catName1 正在打印 APP1 但 this.catName2 仅打印 A，其余部分是 omitted.How 以获得整个 this.catName2 值为 A&B Test。我已经尝试使用 encodeURI() 函数，但没有任何反应。

Answer 1

Angular 正常工作。 &用于分隔URL中的查询参数。因此 & 在 URL 中有特殊的含义。（参考：https://en.wikipedia.org/wiki/Query_string）如果您的值中包含 &，则应在使用前对它们进行 URL 编码。

要URL 编码您可以在浏览器控制台中执行的字符串，encodeURI("<<URL>>")。您的 URL 的编码版本将是

http://localhost:4200/#/test/APP?cat1=APP1&cat2=A&B%20Test=&cat3=Service

encodeURI 但是不编码，, / ? : @ & = + $ #。由于您的查询参数之一具有 &，因此请改用 encodeURIComponent。注意 encodeURIComponent 应该用在单独的查询参数上，而不是 URL 本身。

const params = {
  cat1: "APP1",
  cat2: "A&B Test",
  cat3: "Service"
};

for (const [key, value] of Object.entries(params)) {
  params[key] = encodeURIComponent(value);
}

console.log(params); // prints Object { cat1: "APP1", cat2: "A%26B%20Test", cat3: "Service" }

this.router.navigate(['/test/APP'], { queryParams: params });

Angular 9 如何处理激活的路由参数字段中的符号 (&)

Angular 9 how to handle ampersand(&) inside activated route param field

angular

url

urlencode