如何防止或避免 Angular 2 + 应用程序中的缓存?
How to prevent or avoid Cache in Angular 2 + Applications?
我有一种情况,我将参数发送到 API,后者又生成动态 pdf 并且 API 向我发送新生成文件的路径。当我在浏览器中打开文件时,它显示新生成的文件,但在我的 DOM 中,我仍然看到旧文件,除非我关闭浏览器并再次点击 API。我正在预览生成的 pdf 文件,如下所示:
TS 部分:
this.http.postMethod("report/auditAdmin", data).subscribe((res: any) => {
this.toolbar = "#toolbar=0&navpanes=0";
this.pdfSrc = res.filepath + this.toolbar;
this.Url = this.sanitizer.bypassSecurityTrustResourceUrl(this.pdfSrc);
});
HTML 部分:
<object [data]="Url" type="application/pdf" width="100%" height="1000px"></object>
为了 prevent/avoid 在 Angular 2+ 版本中缓存,您可以通过覆盖 RequestOptions 来实现。
步骤 1:创建自定义 RequestOptions。
import { Injectable } from '@angular/core';
import { BaseRequestOptions, Headers } from '@angular/http';
@Injectable()
export class CustomRequestOptions extends BaseRequestOptions {
headers = new Headers({
'Cache-Control': 'no-cache',
'Pragma': 'no-cache',
'Expires': 'Sat, 01 Jan 2000 00:00:00 GMT'
});
}
步骤 2 在根中提供 AppModule.ts
@NgModule({
...
providers: [
...
{ provide: RequestOptions, useClass: CustomRequestOptions }
]
})
希望以上解决方案能解决您的问题!
问题不在于 API 缓存或 Angular,问题在于对象控件。
当我们尝试加载 pdf 文件或任何其他外部内容对象等数据时,发送 get 请求 以显示内容(get 请求可以在浏览器的网络选项卡中查看)。
所以简单的解决方案是将查询字符串附加到您的 pdf 路径。
this.http.postMethod("report/auditAdmin", data).subscribe((res: any) => {
this.toolbar = "#toolbar=0&navpanes=0";
let ramdom = Math.random();
this.pdfSrc = res.filepath + "?v=" + random + this.toolbar;
this.Url = this.sanitizer.bypassSecurityTrustResourceUrl(this.pdfSrc);
});
现在,每当您的对象尝试对 pdf 文件发出获取请求时,由于查询字符串,每个请求都是新鲜的,因此数据不会从缓存中加载。
我有一种情况,我将参数发送到 API,后者又生成动态 pdf 并且 API 向我发送新生成文件的路径。当我在浏览器中打开文件时,它显示新生成的文件,但在我的 DOM 中,我仍然看到旧文件,除非我关闭浏览器并再次点击 API。我正在预览生成的 pdf 文件,如下所示:
TS 部分:
this.http.postMethod("report/auditAdmin", data).subscribe((res: any) => {
this.toolbar = "#toolbar=0&navpanes=0";
this.pdfSrc = res.filepath + this.toolbar;
this.Url = this.sanitizer.bypassSecurityTrustResourceUrl(this.pdfSrc);
});
HTML 部分:
<object [data]="Url" type="application/pdf" width="100%" height="1000px"></object>
为了 prevent/avoid 在 Angular 2+ 版本中缓存,您可以通过覆盖 RequestOptions 来实现。
步骤 1:创建自定义 RequestOptions。
import { Injectable } from '@angular/core';
import { BaseRequestOptions, Headers } from '@angular/http';
@Injectable()
export class CustomRequestOptions extends BaseRequestOptions {
headers = new Headers({
'Cache-Control': 'no-cache',
'Pragma': 'no-cache',
'Expires': 'Sat, 01 Jan 2000 00:00:00 GMT'
});
}
步骤 2 在根中提供 AppModule.ts
@NgModule({
...
providers: [
...
{ provide: RequestOptions, useClass: CustomRequestOptions }
]
})
希望以上解决方案能解决您的问题!
问题不在于 API 缓存或 Angular,问题在于对象控件。 当我们尝试加载 pdf 文件或任何其他外部内容对象等数据时,发送 get 请求 以显示内容(get 请求可以在浏览器的网络选项卡中查看)。
所以简单的解决方案是将查询字符串附加到您的 pdf 路径。
this.http.postMethod("report/auditAdmin", data).subscribe((res: any) => {
this.toolbar = "#toolbar=0&navpanes=0";
let ramdom = Math.random();
this.pdfSrc = res.filepath + "?v=" + random + this.toolbar;
this.Url = this.sanitizer.bypassSecurityTrustResourceUrl(this.pdfSrc);
});
现在,每当您的对象尝试对 pdf 文件发出获取请求时,由于查询字符串,每个请求都是新鲜的,因此数据不会从缓存中加载。