Angular页面不反映更新，它会保持缓存

Question

我有一个小角度应用程序，显示资产文件夹中的图片。有一个json文件，其中包含照片的所有信息，包括名称，标题，图像位置等。

调用的服务会返回所有照片信息。

服务

 getAllPhotos(){
   return this.http.get(this.photoPath);
 }

将其传递给将响应存储在数组中的组件：

组件

this._data.getAllPhotos().subscribe(res => { this.data = res;
  console.log(this.data);
});

在html页面中，我遍历数据并绑定到模板。

HTML页面

<img mat-card-image src="{{ photo.location }}" flex>

当它在本地主机上运行时，会反映出更改，但是当我发布到主机并在其域上查看页面时，页面和图片会被缓存，并且不会反映更新。

有人可以对此有所了解，谢谢。

Answer 1

要阻止Angular应用程序被缓存，请将以下行添加到index.html head：

<meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">

要阻止浏览器使用图像的缓存版本，可以向源URL添加其他查询字符串。例如，如果在代码中定义了version数字并在更新应用程序时递增，则可以这样设置图像源：

<img [src]="photo.location + '?version=' + version" ...>