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

Question

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

属性 'post' 在类型 'ServerURLInterceptor' 上不存在。

请告诉我我在做什么 wrong.I 想使用拦截器来跟踪每个请求但是当我使用像 GET 或 POST 这样的任何请求时它说属性 'post' 在类型 'ServerURLInterceptor 上不存在。

我的代码是：

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';

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

Property 'post' does not exist on type 'ServerURLInterceptor', in Angular 2 while using ng2-interceptor?

interceptor

typescript

angular-http-interceptors

angular