Блог

Я пытаюсь расширить HTTP-модуль Angular2, чтобы создать своего рода 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 { }
  

Я попытался разместить модуль my HttpInterceptor внутри массива providers в этом файле, и это все еще не работает. Кто-нибудь может сказать мне, почему это не работает?

Спасибо!

Вы должны создать и предоставить свой расширенный класс самостоятельно, вот так:

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

Кроме того, если вы хотите внедрить туда другой MyService, вы можете сделать

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

После этого просто введите MyService в HttpInterceptor