Angular 6复用HttpHeaders时出现类型错误求助

你遇到的错误核心是对象字面量的语法使用错误，在传递HTTP请求配置项时，你没有正确指定headers这个键名，而是直接写了方法调用，导致TypeScript错误地把this当成了对象的属性，这显然不符合请求配置的类型定义要求。

错误原因拆解 #

你写的这段代码：

return this.http.post<SmartCard>(AppDefinitions.ApiSmartCardAdminPath, body, { this.GetHttpHeaders() })

这里的{ this.GetHttpHeaders() }是无效的对象字面量语法，TypeScript会将其解析为一个包含this属性的对象，但HTTP请求配置需要的是带有headers键的结构，所以才会抛出“this不存在于类型定义中”的错误。

正确的两种写法 #

方式一：直接使用AppDefinitions中的静态请求头

既然你已经把请求头封装到了AppDefinitions的静态属性里，直接在请求配置中明确指定headers键即可：

return this.http.post<SmartCard>(
  AppDefinitions.ApiSmartCardAdminPath,
  body,
  { headers: AppDefinitions.JsonHttpHeaders }
);

方式二：使用服务类中的GetHttpHeaders()方法

如果想用服务里的方法生成请求头，同样需要明确指定headers键：

return this.http.post<SmartCard>(
  AppDefinitions.ApiSmartCardAdminPath,
  body,
  { headers: this.GetHttpHeaders() }
);

额外小提示 #

Angular的HttpHeaders是不可变对象，每次调用set()都会返回一个新的实例，不过你这里只设置了一次content-type，当前的封装方式完全没问题。如果后续需要追加更多请求头，记得要重新赋值，比如：

// 正确的请求头追加方式
let headers = new HttpHeaders().set('content-type', 'application/json');
headers = headers.set('Authorization', 'Bearer ' + token);

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