如何转义Angular的HttpParams？解决+号被转为空格的问题

没错，你确实需要对HttpParams中的特殊字符（比如这里的+号）进行转义处理，或者调整HttpParams的编码规则来解决这个问题，我来给你详细解释原因和解决方案：

为什么+号会变成空格？ #

这是因为在application/x-www-form-urlencoded格式（HTTP查询参数默认使用的格式）中，+号被约定为空格的替代表示，服务端在解析查询参数时会自动把+号转换成空格。而Angular默认的HttpParams编码逻辑（HttpUrlEncodingCodec）并不会对+号进行转义，所以当你传递+123456时，它会原封不动地放到URL里，服务端自然就把它解析成了空格开头的 123456（也就是你看到的123456）。

两种可行的解决方案 #

1. 手动转义单个参数值 #

如果你只是个别参数需要处理，最简单的方式是用encodeURIComponent()手动转义参数值，再添加到HttpParams中：

get(phone: string): Observable<PhoneSearchResponse> { 
  // 用encodeURIComponent转义后，+号会变成%2B
  const encodedPhone = encodeURIComponent(phone);
  let params = new HttpParams().append("phone", encodedPhone); 
  return this._http.get<PhoneSearchResponse>(`${this._apiurl}/Get`, { params }); 
}

这样服务端收到的参数值是%2B123456，解析后就会还原成+123456。

2. 自定义编码类全局处理 #

如果你的项目中有很多参数都需要处理特殊字符（不止+号），可以自定义一个编码类，修改Angular默认的编码逻辑，让它自动转义+号：

首先创建自定义编码类：

import { HttpUrlEncodingCodec } from '@angular/common/http';

export class CustomHttpUrlEncodingCodec extends HttpUrlEncodingCodec {
  // 对参数键进行编码时替换+号
  encodeKey(k: string): string {
    return super.encodeKey(k).replace(/\+/g, '%2B');
  }
  // 对参数值进行编码时替换+号
  encodeValue(v: string): string {
    return super.encodeValue(v).replace(/\+/g, '%2B');
  }
}

然后在创建HttpParams时指定使用这个编码类：

get(phone: string): Observable<PhoneSearchResponse> { 
  let params = new HttpParams({ encoder: new CustomHttpUrlEncodingCodec() })
    .append("phone", phone); 
  return this._http.get<PhoneSearchResponse>(`${this._apiurl}/Get`, { params }); 
}

这样所有添加到HttpParams中的参数，只要包含+号都会被自动转义成%2B，不用每次手动处理。

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