Angular 4中如何在Delete API的URL参数中保留空格？

别担心，这个问题其实很常见，咱们一步步来理清解决方案：

首先要明确一个关键知识点：URL中出现的空格被自动替换为%20是标准且正确的URL编码行为，服务器端在接收到这个请求时，会自动将%20解码回原始的空格字符，完全不会影响你和数据库中带空格的报告名称做匹配。你之前尝试把空格替换为空或者'20'的操作反而会破坏原始字符串，导致和数据库中的名称不匹配，这才是问题所在。

针对你的Angular 4代码，正确的做法是对包含空格（或其他特殊字符）的参数值单独进行URL编码，推荐使用JavaScript原生的encodeURIComponent()方法，它会自动将所有URL不安全的字符（包括空格、冒号等）转换成符合标准的编码格式，服务器端接收后会自动解码回原始字符串。

修改后的代码示例如下：

// 先把参数单独提取出来，方便维护和编码
const reportName = 'my report 2012:21:24.810419';
const collectionId = '45902';

this.http.delete(
  `${this.url}api/v1/ReportingService/collectionID/${collectionId}/ReportName/${encodeURIComponent(reportName)}/DeleteReport`,
  { headers: this.headers }
)
.map(this.extractResponse)
.catch(this.handleError);

额外说明 #

如果你的项目使用的是Angular 4.3及以上版本，更推荐使用HttpClient服务配合HttpParams或参数化路由来构建请求URL，这样Angular会自动帮你处理所有参数的编码，进一步减少手动编码的出错概率。不过对于你当前的代码结构，用encodeURIComponent()处理单个参数已经完全能解决问题。

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