Angular 5如何传递请求头？Angular 4代码需做哪些修改？

Hey，刚好我之前也踩过这个坑！Angular 5对HTTP模块做了不少简化和升级，旧的Http、Headers和RequestOptions都被官方弃用了，换成了更易用的HttpClient体系，我来给你把代码改成适配Angular 5的版本：

第一步：替换导入的模块 #

首先要把原来的HTTP相关导入换成新的HttpClient体系，导入路径也发生了变化：

// 替换掉旧的导入
// import { Http, Headers, RequestOptions, Response } from '@angular/http';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
// 如果你用的是RxJS 6+，map操作符需要单独从operators导入
import { map } from 'rxjs/operators';

第二步：修改请求代码 #

原来的RequestOptions已经不需要了，请求配置直接通过对象传递给get方法的第二个参数，同时用HttpHeaders替代旧的Headers：

getGreeting(): Observable<string> { 
  // 用HttpHeaders创建请求头，语法和旧的Headers一致
  const headers = new HttpHeaders({ 
    'Authorization': 'Bearer ' + this.authenticationService.token 
  }); 

  // 直接把headers放在配置对象里，无需封装成RequestOptions
  return this.http.get(Constant.ApiRoot + Constant.GreetingService, { headers })
    // Angular 5的HttpClient默认会自动解析响应，这里直接转成string即可
    // 如果接口返回纯文本，建议加上responseType: 'text'避免JSON解析报错
    // .get(..., { headers, responseType: 'text' })
    .pipe(map(response => response as string)); // RxJS 6+需要用pipe包裹操作符
}

额外注意事项 #

• 如果你的接口返回的是纯文本而非JSON，一定要在请求配置里加上responseType: 'text'，否则HttpClient会默认尝试将响应解析为JSON，导致报错
• 除了headers，其他请求配置比如URL参数（params）、响应类型等，都可以直接放在第二个参数的配置对象中，用法非常直观

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