在Angular 2中使用ng2-interceptor时，类型'ServerURLInterceptor'上不存在属性'post'？

Question

我在我的 Angular2 项目中使用 angular2-interceptors，但是当我尝试调用 POST/GET 方法时，出现了这个错误：

“ServerURLInterceptor”类型上不存在属性“post”。

请建议我在哪里做错了。我想使用拦截器来跟踪每个请求，但是当我使用 GET 或 POST 之类的任何请求时，它说“ServerURLInterceptor”类型上不存在属性“post”。

我的代码是：

interceptorService.ts：

import { Interceptor, InterceptedRequest, InterceptedResponse } from 'ng2-interceptors';
export class ServerURLInterceptor implements Interceptor {
    public interceptBefore(request: InterceptedRequest): InterceptedRequest {
         console.log(request);
        return request;
        /*
          You can return:
            - Request: The modified request
            - Nothing: For convenience: It's just like returning the request
            - <any>(Observable.throw("cancelled")): Cancels the request, interrupting it from the pipeline, and calling back 'interceptAfter' in backwards order of those interceptors that got called up to this point.
        */
    }

    public interceptAfter(response: InterceptedResponse): InterceptedResponse { 
           console.log(response);
           return response;
        /*
          You can return:
            - Response: The modified response
            - Nothing: For convenience: It's just like returning the response
        */
    }
}

app.module.ts：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MaterialModule } from '@angular/material';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { LoginComponent } from './components/login/login.component';
import { FormsModule } from '@angular/forms';
import { LoginService } from './helper/services/login.service';

import { InterceptorService } from 'ng2-interceptors';
import { ServerURLInterceptor } from './helper/interceptor/interceptorService';
import { XHRBackend, RequestOptions } from '@angular/http';
export function interceptorFactory(xhrBackend: XHRBackend, requestOptions: RequestOptions, serverURLInterceptor:ServerURLInterceptor){ // Add it here
  let service = new InterceptorService(xhrBackend, requestOptions);
  service.addInterceptor(serverURLInterceptor); // Add it here
  console.log("interceptor");
  return service;
}


@NgModule({
  imports: [ 
    MaterialModule.forRoot(),
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  declarations: [
    AppComponent,
    LoginComponent
  ],    
  providers: [
    LoginService,
    ServerURLInterceptor,
    {
      provide: InterceptorService,
      useFactory: interceptorFactory,
      deps: [XHRBackend, RequestOptions, ServerURLInterceptor] // Add it here, in the same order as the signature of interceptorFactory
    }
  ],                                         
  bootstrap: [ AppComponent ]
})
export class AppModule { }

login.service.ts：

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Http } from '@angular/http';
import { ServerURLInterceptor } from '../../helper/interceptor/interceptorService';        

@Injectable()
export class LoginService {
  // constructor(private http:Http){}
  constructor(private http:ServerURLInterceptor){}

  login(username:string,password:string){
    console.log(username+" , "+password+" in LoginService");
    debugger;
    return this.http.post('http://localhost:4100/login', {
      email: username,
      password:password
    });
    // .map(response => response.json().data);
  }
}

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Http } from '@angular/http';
import { ServerURLInterceptor } from '../../helper/interceptor/interceptorService';

@Injectable()
export class LoginService{
  // constructor(private http:Http){}
  constructor(private http:ServerURLInterceptor){}

  login(username:string,password:string) {
    console.log(username+" , "+password+" in LoginService");
    debugger;
    return this.http.post('http://localhost:4100/login',{
      email: username,
      password:password
    });
    // .map(response => response.json().data);
  }
}

Answer 1

正确地导入InterceptorService，就像您的 login.component.ts 中的以下代码一样：

import { InterceptorService     } from 'ng2-interceptors';