在 Angular2 中扩展 HTTP 模块会引发错误

Question

我正在尝试扩展 Angular2 HTTP 模块以创建各种 HTTP 拦截器。唯一的问题是当我尝试扩展此模块时出现以下错误：

No provider for ConnectionBackend!

我不知道为什么会发生这种情况，而且似乎无法解决这个错误。

这是我的自定义 HTTP 模块：

import { Injectable } from "@angular/core";
import { Http, ConnectionBackend, RequestOptions, Request, RequestOptionsArgs, Response } from "@angular/http";
import { Observable } from "rxjs";

@Injectable()
export class HttpInterceptor extends Http {
    constructor(
        backend: ConnectionBackend,
        defaultOptions: RequestOptions
    ) {
        super(backend, defaultOptions);
    }

    request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
        console.log('request...');
        return super.request(url, options).catch(res => {
            // do something
        });
    }

    get(url: string, options?: RequestOptionsArgs): Observable<Response> {
        console.log('get...');
        return super.get(url, options).catch(res => {
            // do something
        });
    }
}

这是我的 app.module.ts 文件：

import 'app/rxjs-extensions';

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { HttpModule } from "@angular/http";
import { FormsModule } from "@angular/forms";

import { AuthGuard } from "./guards/auth.guard";
import { routing } from "./app.routing";

import { AppComponent }   from './app.component';

import { HomeComponent } from "./components/home/HomeComponent";
import { LoginComponent } from "./components/login/LoginComponent";
import { NavBarComponent } from "./components/navbar/NavBarComponent";
import { ProductComponent } from "./components/catalog/products/ProductComponent";

import { GlobalEventsManager } from "./services/globalEventsManager.service";
import { AuthService } from "./services/auth.service";
import { ToastModule } from 'ng2-toastr/ng2-toastr';
import { LeftNavComponent } from "./components/left-nav/left-nav-component";
import { SettingsComponent } from "./components/settings/settings-component";
import { UsersComponent } from "./components/users/users-component";
import { OptionsComponent } from "./components/catalog/options/OptionsComponent";
import { CategoriesComponent } from "./components/catalog/categories/CategoriesComponent";
import { ManufacturersComponent } from "./components/catalog/manufacturers/ManufacturersComponent";
import { ProductSearchComponent } from "./components/catalog/products/directives/ProductSearchComponent";
import { ProductListComponent } from "./components/catalog/products/directives/ProductListComponent";
import { ProductService } from "./services/product.service";
import { HttpInterceptor } from "./services/HttpInterceptor.service";


@NgModule({
    imports: [
        BrowserModule,
        HttpModule,
        FormsModule,
        routing,
        ToastModule
    ],
    declarations: [
        AppComponent,
        HomeComponent,
        LoginComponent,
        NavBarComponent,
        ProductComponent,
        ProductSearchComponent,
        ProductListComponent,
        LeftNavComponent,
        SettingsComponent,
        UsersComponent,
        OptionsComponent,
        CategoriesComponent,
        ManufacturersComponent
    ],
    providers: [
        AuthService,
        AuthGuard,
        GlobalEventsManager,
        ProductService,
        HttpInterceptor
    ],
    bootstrap:    [ AppComponent ]
})

export class AppModule { }

我尝试将我的 HttpInterceptor 模块放在此文件的提供程序数组中，但这仍然不起作用。谁能告诉我为什么这不起作用？

谢谢！

Answer 1

您必须像这样自己构建并提供您的扩展类：

    ProductService,
    {
        provide: HttpInterceptor,
        useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) =>
            new HttpInterceptor(backend, defaultOptions),
        deps: [XHRBackend, RequestOptions]
    }
],

Answer 2

另外，如果你想在那里注入另一个 MyService，你可以这样做

   {
      deps: [XHRBackend, RequestOptions, MyService],
      provide: HttpInterceptor,
      useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, myService: MyService) =>
        new HttpInterceptor(backend, defaultOptions, myService),
    },

之后，只需在HttpInterceptor 中注入MyService