Question

我有一个使用Http的服务：

import { Injectable }     from '@angular/core';
import { Inject } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';

@Injectable()
export class OrdersService {
    constructor(@Inject(Http) private http:Http) {}
    ...
}

使用它的组件

import { Component } from '@angular/core';
import { FormBuilder, Validators } from '@angular/common';
import { HTTP_PROVIDERS } from '@angular/http';
import { Router} from '@angular/router';

import { OrdersService } from '../services/orders.service'

@Component({
  selector: 'login',
  templateUrl: './login.component.html',
  providers: [
      HTTP_PROVIDERS, //{ provide: Http, useClass: Http }
      AuthService, AuthStore,
      OrdersService
  ]
})
export class LoginComponent {

    constructor(private authService: AuthService, private ordersService: OrdersService){}
      ....
}

这很有效。我有一些注释掉的文字{提供：Http，useClass：Http}。我想在这里提供我自己的课程，扩展Http，但仍然具有所有相同的依赖性。我在这里采取的第一步是明确使用Http。

一旦我取消评论此文字（并添加一个http导入），一切都会中断。我收到错误"No provider for ConnectionBackend" 。似乎HTTP_PROVIDERS刚刚停止作为提供者工作。

如何明确使用Http工作？
如何使用自己的CustomHttp并在HTTP_PROVIDERS中使用提供程序？

Answer 1

从Angular 2.1.1及以上语法提供选项后，angular2团队引入了新的模块概念。您可以在下面找到正确的语法，如何在 app.module.ts中添加自己的Http自定义提供程序

export function httpFactory(backend: XHRBackend, defaultOptions: RequestOptions) {
  return  new CustomHttp(backend, defaultOptions);
}

...

providers:    [
               {provide: Http, 
                         useFactory: httpFactory,
                         deps: [XHRBackend, RequestOptions]
               }
              ]

您还可以在此处验证angular2文档：https://angular.io/docs/ts/latest/api/http/index/XHRBackend-class.html

如果你想实现自己的CustomHttp类，我会建议你一步一步地阅读Thierry Templier的文章，他将介绍如何做到这一点。

Implementing CustomHttp for angular2这是一篇非常有用的文章，描述了如何扩展拦截请求调用并添加自定义处理错误。

Answer 2

使用您自己的CustomHttp时，您不需要使用HTTP_PROVIDERS，您需要执行以下操作（如果您使用的是RC5或在您的app.module.ts中） main.ts如果你使用的是RC4）：

providers: [
    ConnectionBackend,
    provide(
        Http, {
            useFactory: (
                backend: XHRBackend,
                defaultOptions: RequestOptions) =>
                new CustomHttp(backend, defaultOptions),
            deps: [XHRBackend, RequestOptions]
        }),
]

我有同样的问题，这为我解决了。

编辑：

如果您使用RC5，则不需要导入HTTP_PROVIDERS，因为您将导入HttpModule，但我并不完全记得您是否需要HTTP_PROVIDERS RC4。你可能会需要它。

Answer 3

如果您不想更改XHRBackend和RequestOptions的实现，您可以更简单地执行：

providers: [
    {provide: Http, useClass: MyCustomHttp}
]

Angular 2 DI，使用自定义Http

3 个答案: