Angular 8/9 -将下载的图像存储在数组中以进行缓存

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

@Injectable({
  providedIn: 'root'
})
export class ImageCacheService {
  private imageCache: string[] = [];

  constructor() { }

  cacheImage(imageUrl: string): void {
    if (!this.isImageCached(imageUrl)) {
      this.imageCache.push(imageUrl);
    }
  }

  isImageCached(imageUrl: string): boolean {
    return this.imageCache.includes(imageUrl);
  }
}

import { Component } from '@angular/core';
import { ImageCacheService } from './image-cache.service';

@Component({
  selector: 'app-image',
  template: `
    <img [src]="imageUrl" (load)="cacheImage()" alt="Image">
  `
})
export class ImageComponent {
  imageUrl = 'https://example.com/image.jpg';

  constructor(private imageCacheService: ImageCacheService) { }

  cacheImage(): void {
    this.imageCacheService.cacheImage(this.imageUrl);
  }
}