Angular中如何阻止搜索参数的+符号被转换为空格？

你遇到的这个情况是HTTP请求查询参数的编码规则导致的——在标准的application/x-www-form-urlencoded格式里，+符号会被默认解析成空格，而Angular的HttpParams刚好采用这种默认编码方式，所以直接传入带+的字符串就会被转成空格传到后端。

这里给你几种实用的解决方法：

方法一：手动用encodeURIComponent编码参数值 #

这是最直接的方式，把带+的参数值先编码再传入HttpParams：

search(searchItem: string): Promise<any> { 
  // 先对searchItem进行URL编码，把+转成%2B
  const encodedSearchItem = encodeURIComponent(searchItem);
  let params = new HttpParams(); 
  params = params.append('searchItem', encodedSearchItem); 
  return new Promise((resolve, reject) => { 
    this.httpClient.get(this.urlService.getApiUrl() + 'test/item', { params: params }) 
      .subscribe(data => { 
        resolve(data); 
      }, error => { 
        console.log('Error: ' + JSON.stringify(error)); 
        reject(error); 
      }); 
  }); 
}

后端收到%2B后会自动解码回+，这样就不会变成空格了。

方法二：用fromString直接构造编码后的查询字符串 #

这种方式和方法一原理一样，只是换了参数的构造方式：

search(searchItem: string): Promise<any> { 
  // 直接拼接编码后的参数字符串
  const params = new HttpParams({
    fromString: `searchItem=${encodeURIComponent(searchItem)}`
  });
  return new Promise((resolve, reject) => { 
    this.httpClient.get(this.urlService.getApiUrl() + 'test/item', { params: params }) 
      .subscribe(data => { 
        resolve(data); 
      }, error => { 
        console.log('Error: ' + JSON.stringify(error)); 
        reject(error); 
      }); 
  }); 
}

方法三：自定义Http参数编码器（适合多参数场景） #

如果你的项目里有很多带特殊字符的参数，不想每次手动编码，可以自定义一个编码器，让HttpParams用它来处理参数：

首先创建自定义编码器类：

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

export class CustomHttpEncoder implements HttpParameterCodec {
  encodeKey(key: string): string {
    return encodeURIComponent(key);
  }

  encodeValue(value: string): string {
    return encodeURIComponent(value);
  }

  decodeKey(key: string): string {
    return decodeURIComponent(key);
  }

  decodeValue(value: string): string {
    return decodeURIComponent(value);
  }
}

然后在使用HttpParams时传入这个编码器：

search(searchItem: string): Promise<any> { 
  let params = new HttpParams({ encoder: new CustomHttpEncoder() }); 
  params = params.append('searchItem', searchItem); 
  return new Promise((resolve, reject) => { 
    this.httpClient.get(this.urlService.getApiUrl() + 'test/item', { params: params }) 
      .subscribe(data => { 
        resolve(data); 
      }, error => { 
        console.log('Error: ' + JSON.stringify(error)); 
        reject(error); 
      }); 
  }); 
}

这样所有通过这个HttpParams传递的参数都会用encodeURIComponent编码，不用再逐个处理了。

简单总结下：核心就是把+编码成%2B，避免被解析成空格，上面三种方法都能达到这个效果，你可以根据自己的场景选择最合适的一种。

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