我正在try 通过拦截器实现HttpCache.以下是caging-interceptor.service.ts

import { HttpRequest, HttpResponse, HttpInterceptor, HttpHandler, HttpEvent } from '@angular/common/http'
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';

import 'rxjs/add/operator/do';
import 'rxjs/add/observable/of';

export abstract class HttpCache {
  abstract get(req: HttpRequest<any>): HttpResponse<any>|null;
  abstract put(req: HttpRequest<any>, resp: HttpResponse<any>): void;
}



@Injectable()
export class CachingInterceptor implements HttpInterceptor {
    constructor(private cache: HttpCache) {}

    intercept(req: HttpRequest<any>, next: HttpHandler) : Observable<HttpEvent<any>> {
        if(req.method !== 'GET'){
            return next.handle(req);
        }

        const cachedResponse = this.cache.get(req);

        if(cachedResponse){
            return Observable.of(cachedResponse);
        }

        return next.handle(req).do(event => {
            if(event instanceof HttpResponse){
                this.cache.put(req, event);
            }
        })
    }
}

我是从test.service.ts打来的

import { Injectable } from '@angular/core';
import { Headers, Http, Response} from '@angular/http';
import { HttpClient} from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { ReplaySubject } from 'rxjs/ReplaySubject';

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

import { BehaviorSubject } from 'rxjs/BehaviorSubject';

import { APIService } from './api.service';
import { CachingInterceptor } from './caching-interceptor.service';
import { ConfigurationService } from './configuration.service';
import { AuthenticationStatus, IAuthenticationStatus } from '../models';
import { User } from '../models/user.model';

@Injectable()
export class PlatformService extends APIService {



  constructor(private http: Http, public httpClient: HttpClient, private configuration: ConfigurationService,
     public cachingInterceptor: CachingInterceptor) {
    super();


  }

  getUserById(id: string) {
    console.log(this.requestOptions);
    return this.httpClient.get(this._getAPIUrl('user/' + id),this.requestOptions).
      subscribe(res => res);
  }
  get requestOptions(): RequestOptions {
    const tokenObj = window.localStorage.getItem('TOKEN');
    const token = JSON.parse(tokenObj);
    const headers = this.headers;
    headers.append('Authorization', 'Bearer ' + token.token);
    headers.append('Access-Control-Allow-Origin', '*');
    return new RequestOptions({ headers: headers });
  }


}

模块文件如下

import { CommonModule } from '@angular/common';
import { HTTP_INTERCEPTORS, HttpClient } from '@angular/common/http';
import { FormsModule } from '@angular/forms';

import { ModuleWithProviders, NgModule } from '@angular/core';

import { PlatformService } from '../../services/platform.service';
import { CachingInterceptor } from '../../services/caching-interceptor.service';


@NgModule({
  imports: [CommonModule, FormsModule],

  declarations: [],

  exports: [],

  entryComponents: [EntryHereComponent]
})
export class StructurModule {
  public static forRoot(): ModuleWithProviders {
    return { ngModule: StructurModule, providers: [PlatformService,
       {
        provide: HTTP_INTERCEPTORS,
        useExisting: CachingInterceptor,
        multi: true
    },HttpClient] };
  }
}

我不明白,你错过了什么,所以这是一个错误

没有HttpHandler的提供程序.

如果我在模块文件中的provider中添加HttpHandler,它会开始为provide给出错误:HTTP_拦截器,component.

推荐答案

HttpClient在angular 4.3中引入,所以如果你想使用HttpClient,你需要从'@angular/common/http'中导入HttpClientModule.确保在BrowserModule之后导入HttpClientModule,如下所示.这official docso answer将为您提供深入的信息.

import { HttpClientModule } from '@angular/common/http';

@NgModule({
 imports: [
   BrowserModule,
   HttpClientModule
 ],
 ...

Angular相关问答推荐

运行容器后,Docker容器立即退出

如何在每次Angular 编译之前执行脚本(esbuild)

try 测试具有Angular material 下拉列表的组件时,在Angular 17中发现&q;错误的意外合成属性@TransitionMessages

Angular 15:将数据从主零部件传递到辅零部件

如何使用ChangeDetectionStrategy.OnPush?

Sass-Loader中出现分号错误:ANGLE应用程序的缩进语法中不允许使用分号

完成行为主体

如何在 Angular 库中将依赖项声明为可选?

angular4应用程序中输入的最小值和最大值

Angular 没有可用于依赖类型的模块工厂:ContextElementDependency

如何在 Angular CLI 1.1.1 版中将路由模块添加到现有模块?

AOT - Angular 6 - 指令 SomeComponent,预期 0 个参数,但go 有 1 个参数

Angular2 - 如何开始以及使用哪个 IDE

将外部 CSS 加载到组件中

如何在悬停时向元素添加类?

错误:angular2 中没有 HttpHandler 的提供者

Firestore 从集合中获取文档 ID

如何处理Angular2中的查询参数

为什么 ngOnInit 被调用两次?

在渲染视图/模板之前等待 Angular 2 加载/解析模型