1

我正在尝试将拦截器添加到我的 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",

但是没有一个调试器语句被命中。有人可以帮我吗？如果我将它注入任何组件，它会显示错误为“没有连接后端的提供者”。提前致谢。

4

1 回答 1

0

使用 angular 4.3 这里是参考：- https://angular.io/guide/http

与当前实现使用 providers: [ HttpEventHandler, XHRBackend, CustomHttp, { provide: Http, useFactory: HttpInterceptor, deps: [XHRBackend, RequestOptions, HttpEventHandler] }, ],

于 2017-07-31T14:05:01.343 回答