Angular 4.2.x拦截器未被执行

时间:2017-09-12 07:35:15

标签: angular angular2-services angular-http angular4-httpclient

我正在使用
- Angular 4.2.4

我试图使用以下角度代码

拦截服务
import {Injectable} from '@angular/core';
import {HttpEvent, HttpInterceptor, HttpHandler, HttpRequest} from 
'@angular/common/http';
import { Observable } from 'rxjs/Rx';
export class LocalHttpClientInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler): 
Observable<HttpEvent<any>> {
  const username = 'me';
  const password = 'blahblah';
  const authReq = req.clone({headers: req.headers.set('Authorization', 
'Basic ' + btoa(username + ':' + password))});
  return next.handle(authReq);
  }
 }
模块文件中的

import { LocalHttpClientInterceptor } from './local-http-client-
interceptor';
  @NgModule({
   imports: [
   CommonModule,
   FormsModule,
   ReactiveFormsModule,
   MdAutocompleteModule,
   MdInputModule,
   MdIconModule,
   HttpModule,
   MdGridListModule,
   FlexLayoutModule
 ],
 declarations: [ UserSearchComponent, ObjectComponent],
 exports: [UserSearchComponent, ObjectComponent, FlexLayoutModule],
 providers : [{
 provide: HTTP_INTERCEPTORS,
 useClass: LocalHttpClientInterceptor,
 multi: true,
 }, UserSearchService, LocalHttpClientService, StorageService]
})
 export class SharedModule { }

问题: 我能够看到拦截函数定义中的调试点被触发,但是在做了一些服务之后调用内部的调用代码没有被调用。

我使用来自@ angular / http的angular http来使用get,options,post methods来调用服务

1 个答案:

答案 0 :(得分:2)

根据官方更改日志,angular 4.3.0可以使用4.2.4,而您正在使用@angular/common/http我认为可能是原因。并尝试使用@angular/http代替httpClient

如何在角度https://github.com/Enoch-Liu/GL

中使用新的{{1}}

以下是工作人员https://angular.io/guide/http

如需更多更改日志,请访问https://plnkr.co/edit/wtl8EIaCpov6ScwBfPWX?p=preview