angularjs - Angular 2 DI，使用自定义 Http

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){}
      ....
}

这行得通。我有一些注释掉的文本 { provide: Http, useClass: Http }。我想在这里提供我自己的扩展 Http 的类，但仍然具有所有相同的依赖项。我在这里采取的第一步是明确使用 Http。

一旦我取消对这段文本的注释(并添加一个 http 导入)，一切都会崩溃。我收到错误 “No provider for ConnectionBackend”。似乎 HTTP_PROVIDERS 刚刚停止作为提供者工作。

• 如何明确使用 Http？
• 如何使用我自己的 CustomHttp 并使用 HTTP_PROVIDERS 中的提供程序？

Answer 1

在 angular2 团队引入新模块概念后，从 Angular 2.1.1 及以上版本开始，provide 选项的语法发生了变化。您将在下面找到正确的语法，了解如何在您的 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这是一篇非常有用的文章，它描述了如何扩展以拦截请求调用并添加自定义处理错误。