Angular5中ng2-completer自定义请求头无法生效求助

嘿，我之前在Angular5里用ng2-completer的时候也碰到过这个问题！折腾了好一会儿才搞明白怎么正确配置请求头带token，给你分享下解决方案：

核心问题分析 #

ng2-completer的远程数据源默认不会自动携带自定义请求头，必须手动配置RequestOptions（或HttpClient的HttpHeaders）并绑定到数据源上，才能让请求带上你的认证Token。

具体实现步骤 #

1. 导入必要的模块 #

根据你使用的是Http还是HttpClient（Angular5推荐用HttpClient），导入对应的头信息模块：

// 如果用旧的Http模块
import { Headers, RequestOptions } from '@angular/http';
// 如果用HttpClient（推荐）
import { HttpHeaders } from '@angular/common/http';

2. 在组件中配置请求头和数据源 #

在你的组件类里，先构建包含Token的请求头，再把它绑定到ng2-completer的远程数据源上：

示例代码（用Http模块）：

import { Component } from '@angular/core';
import { CompleterService, CompleterData } from 'ng2-completer';
import { Headers, RequestOptions } from '@angular/http';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  public dataService: CompleterData;
  // 从你的认证服务/localStorage获取实际Token
  private authToken = localStorage.getItem('authToken');

  constructor(private completerService: CompleterService) {
    // 构建请求头，带上Bearer Token
    const headers = new Headers({
      'Authorization': `Bearer ${this.authToken}`,
      'Content-Type': 'application/json'
    });
    const requestOptions = new RequestOptions({ headers: headers });

    // 初始化远程数据源，并绑定请求选项
    this.dataService = this.completerService.remote(
      'https://your-api-url.com/search?q=', // 你的API接口，q是搜索参数占位符
      'displayField', // 下拉列表显示的字段名
      'searchField' // API用来匹配搜索的字段名
    );
    // 关键：把请求选项设置到数据源上
    this.dataService.setRequestOptions(requestOptions);
  }
}

示例代码（用HttpClient模块）：

import { Component } from '@angular/core';
import { CompleterService, CompleterData } from 'ng2-completer';
import { HttpHeaders } from '@angular/common/http';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  public dataService: CompleterData;
  private authToken = localStorage.getItem('authToken');

  constructor(private completerService: CompleterService) {
    // 构建HttpHeaders
    const headers = new HttpHeaders()
      .set('Authorization', `Bearer ${this.authToken}`)
      .set('Content-Type', 'application/json');
    const requestOptions = { headers: headers };

    // 初始化远程数据源，直接传入请求选项
    this.dataService = this.completerService.remote(
      'https://your-api-url.com/search?q=',
      'displayField',
      'searchField',
      requestOptions // 这里直接传请求选项也可以
    );
  }
}

3. 确保HTML模板正确绑定 #

在你的HTML里，确认[dataService]已经绑定到组件里定义的数据源：

<ng2-completer 
  [(ngModel)]="searchKeyword" 
  [dataService]="dataService" 
  [minSearchLength]="1"
  placeholder="输入关键词搜索"></ng2-completer>

额外注意事项 #

• Token有效性检查：确保你的authToken不是空值，可以在控制台打印确认Token是否正确获取。
• CORS配置：如果你的API和前端是跨域的，需要在后端配置Access-Control-Allow-Headers，允许Authorization等自定义请求头，否则浏览器会拦截请求。
• ng2-completer版本：确保你使用的ng2-completer版本兼容Angular5，建议使用^3.0.0左右的版本（对应Angular5）。

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