使用ng2-interceptor時，在'Angular 2中'類型'ServerURLInterceptor'上不存在屬性'post'？

Question

我用我Angular2項目angular2攔截器，但是當我試圖調用一個POST/GET方法再發生這樣的錯誤：

住宅「後」的類型「ServerURLInterceptor」不存在。

請建議我在哪裏做錯了。我想要使用攔截器來抓取每個請求，但是當我使用GET或POST之類的任何請求時，它表示Property'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';