如何在routerLink上缓存httpClient响应？

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class CacheService {
  private cache: { [url: string]: any } = {};

  constructor() { }

  get(url: string): any {
    return this.cache[url];
  }

  set(url: string, data: any): void {
    this.cache[url] = data;
  }
}

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { CacheService } from './cache.service';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
  data: any;

  constructor(
    private http: HttpClient,
    private cacheService: CacheService
  ) { }

  ngOnInit(): void {
    const url = 'https://api.example.com/data'; // 替换为实际的API地址

    if (this.cacheService.get(url)) {
      this.data = this.cacheService.get(url);
    } else {
      this.http.get(url).subscribe((response) => {
        this.data = response;
        this.cacheService.set(url, response);
      });
    }
  }
}

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ExampleComponent } from './example.component';

const routes: Routes = [
  {
    path: 'example',
    component: ExampleComponent,
    resolve: {
      data: ExampleResolver
    }
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { CacheService } from './cache.service';

@Injectable({
  providedIn: 'root'
})
export class ExampleResolver implements Resolve<any> {
  constructor(
    private http: HttpClient,
    private cacheService: CacheService
  ) { }

  resolve(): Promise<any> {
    const url = 'https://api.example.com/data'; // 替换为实际的API地址

    if (this.cacheService.get(url)) {
      return Promise.resolve(this.cacheService.get(url));
    } else {
      return this.http.get(url).toPromise().then((response) => {
        this.cacheService.set(url, response);
        return response;
      });
    }
  }
}