角4 http攔截器：工廠沒有被調用

Question

我正在嘗試將攔截器添加到我的angular 4應用程序中。

我有以下攔截器代碼

import { Injectable } from '@angular/core';
import { ConnectionBackend, Headers, Http, RequestOptions, RequestOptionsArgs, Response } from '@angular/http';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class CustomHttp extends Http {
    static get parameters() {
        return [[ConnectionBackend], [RequestOptions]];
    }
    constructor(private backend: ConnectionBackend,
        private defaultOptions: RequestOptions) {
        super(backend, defaultOptions);
    }

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

    post(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> {
        return this.intercept(super.post(url, body, this.getRequestOptionArgs(options)));
    }

    put(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> {
        return this.intercept(super.put(url, body, this.getRequestOptionArgs(options)));
    }

    delete(url: string, options?: RequestOptionsArgs): Observable<Response> {
        return this.intercept(super.delete(url, options));
    }

    getRequestOptionArgs(options?: RequestOptionsArgs): RequestOptionsArgs {
        if (options == null) {
            options = new RequestOptions();
        }
        if (options.headers == null) {
            options.headers = new Headers();
        }
        return options;
    }

    intercept(observable: Observable<Response>): Observable<Response> {
        debugger;
        //this.events.publish("httpInterceptor:request:initiated");
        return observable
            .do((res: Response) => {
                //this.events.publish("httpInterceptor:request:success");
            }, (err: any) => {
                //this.events.publish("httpInterceptor:request:failure", err);
            });
    }
}

export function HttpInterceptor(backend: ConnectionBackend,
    defaultOptions: RequestOptions) {
    debugger;
    return new CustomHttp(backend, defaultOptions);
}

我在app.module中使用如下

 @NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    HomeComponent,
    SpinnerComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpModule,
    HttpClientModule
  ],
  providers: [
    HttpEventHandler,
    XHRBackend,
    {
  provide: Http, useFactory: (xhrbackend, requestoptions, HttpEventHandler) => {
    return new CustomHttp(xhrbackend, requestoptions, HttpEventHandler);
  }, deps: [XHRBackend, RequestOptions, HttpEventHandler]
},
  ],
  bootstrap: [AppComponent, SpinnerComponent]
})
export class AppModule { }

以下是我正在使用的模塊的版本

    "@angular/animations": "^4.0.0",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",

但是沒有一個調試器語句被命中。 有人可以幫我嗎？ 而且，如果我將其注入到任何組件中，則會顯示錯誤為“無連接后端提供程序”。 提前致謝。

Answer 1

使用angular 4.3時，這里是參考： -https : //angular.io/guide/http

在當前的實現中，使用providers: [ HttpEventHandler, XHRBackend, CustomHttp, { provide: Http, useFactory: HttpInterceptor, deps: [XHRBackend, RequestOptions, HttpEventHandler] }, ],