Question

我试图在角度2中构建一个内置Http服务的包装器，以便有可能添加自定义行为（标题，参数等）。

所以我创建了一个通常的类（不是服务）并从Http继承它。 Class definition

import {
  Http,
  ConnectionBackend,
  RequestOptions,
  RequestOptionsArgs,
  Headers
} from '@angular/http';
import { Observable } from 'rxjs/Observable';
import {tamamApiUrl} from '../constants';
import {CustomQueryEncoder} from './CustomQueryEncoder';
import 'rxjs/Rx';

export class BaseHttp extends Http {
  protected applicationDataService;
  protected baseUrl: string = tamamApiUrl;
  protected encoder: CustomQueryEncoder;

  constructor(backend:ConnectionBackend,
              defaultOptions: RequestOptions, applicationDataService: any) {
    super(backend, defaultOptions);
    this.applicationDataService = applicationDataService;
  }


  get(url: string, options?: RequestOptionsArgs): Observable<any> {
    this.addDefaultOptions(options);
    return super.get(url, options);
  }

  post(url: string, body: any, options?: RequestOptionsArgs): Observable<any> {
    this.addDefaultOptions(options);
    this.addDefaultPostOptions(options);
    return super.post(url, body, options);
  }

  private addDefaultOptions(options?: RequestOptionsArgs): RequestOptionsArgs {
    if (options == null) {
      options = new RequestOptions();
    }
    if (options.headers == null) {
      options.headers = new Headers();
    }
    const applicationData = this.applicationDataService.getApplicationData();

    if (applicationData.applicationKey) {
      options.headers.append('application-id', applicationData.applicationKey);
    }

    if (applicationData.secretKey) {
      options.headers.append('secret-key', applicationData.secretKey);
    }

    if (applicationData.userToken) {
      options.headers.append('user-token', applicationData.userToken);
    }

    return options;
  }

  private addDefaultPostOptions(options): void {
    options.headers.append('Content-Type', 'application/json');
  }

  /*private requestInterceptor(): void {
    this.loaderService.showPreloader();
  }


  private responseInterceptor(): void {
    this.loaderService.hidePreloader();
  }*/
}

比我创建了一个从这个类继承的服务，以便我可以在以后注入并用于我的目的。

import { Headers, URLSearchParams } from '@angular/http';
import {tamamRootUrl} from '../constants';
import {BaseHttp} from '../api/BaseHttp';
import { Injectable } from '@angular/core';
import {
  ConnectionBackend,
  RequestOptions,
} from '@angular/http';
import {ApplicationService} from './ApplicationService';

@Injectable()
export class InspectionHttpService extends BaseHttp{

  protected baseUrl: string = tamamRootUrl;
  protected params: URLSearchParams = new URLSearchParams();

  constructor(backend: ConnectionBackend,
              defaultOptions: RequestOptions, protected applicationService: ApplicationService) {
    super(backend, defaultOptions, applicationService);
  }

  getRootUrl() {
    return this.baseUrl;
  }
}

Service definition

尝试在组件中注入已创建的服务后，我收到错误：

error_handler.js：47 EXCEPTION：未捕获（在承诺中）：错误：./VehiclesListComponent类中的错误VehiclesListComponent_Host - 内联模板：0：0由以下原因引起：没有ConnectionBackend的提供者！

我尝试使用堆栈溢出来搜索解决方案，但它看到，HtpModule应该已经具备正常工作所需的一切。

有人能帮帮我吗？问题在哪里？

Answer 1

您无法将其添加到此类提供商

providers: [ ApplicationService, InspectionHttpService ]

如果你这样做，那么Angular将尝试创建它，并且它找不到ConnectionBackend

的提供者

您需要使用工厂，您可以在其中传递XHRBackend（实施ConnectionBackend）

imports: [HttpModule],
providers: [
  ApplicationService,
  {
    provide: InspectionHttpService,
    deps: [XHRBackend, RequestOptions, ApplicationService],
    useFactory: (backend, options, aplicationService) => {
      return new InspectionHttpService(backend, options, applicationService);
    }
  }
]

有了这个，您可以将其注入InspectionHttpService。

constructor(private http: InspectionHttpService) {}

如果您希望能够将其Http注入，则需要将provide更改为Http而不是InspectionHttpService。但是，如果您需要，这将覆盖使用常规Http的任何能力。

更新

在某些环境中，您可能会因上述代码而出错。我忘记了确切的错误信息，但它会给你一个提取工厂功能的建议解决方案，即

export function httpFactory(backend: XHRBackend, options: RequestOptions,
                            service: ApplicationService) {
  return new InspectionHttpService(backend, options, service);
}

useFactory: httpFactory

据我所知，我认为错误与AoT有关

Answer 2

扩展Http服务时，必须为父类注入后端和选项：

＆＃13;

@Injectable()
export class HttpInterceptor extends Http {
  constructor(
    backend: XHRBackend,
    options: RequestOptions,
    ...
  ) {
    super(backend, options);
  }
  ...
}

＆＃13;

这样您就不必使用工厂了，因为Angular会自行计算注射量。

从Http继承时没有ConnectionBackend的提供者

2 个答案:

更新