Question

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

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

请建议我在哪里做错。我想使用拦截器来查询每个请求，但是当我使用任何请求（如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';

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

1 个答案: