Как предотвратить или избежать кэширования в приложениях Angular 2+? - PullRequest
Новая
       7

Как предотвратить или избежать кэширования в приложениях Angular 2+?

0 голосов
/ 02 февраля 2019

У меня есть ситуация, когда я отправляю параметры в API, который, в свою очередь, генерирует динамический pdf, а API отправляет мне путь к вновь созданному файлу.Когда я открываю файл в браузере, он показывает недавно созданный файл, но в моем DOM я все еще вижу старый файл до тех пор, пока я не закрою браузер и снова не нажму API.Я просматриваю созданный файл PDF следующим образом:

TS PART: 

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 PART: 

<object [data]="Url" type="application/pdf" width="100%" height="1000px"></object>

Ответы [ 2 ]

0 голосов
/ 04 февраля 2019

Проблема не в API Cache или Angular. Проблема в объекте управления.Когда мы пытаемся загрузить данные, такие как файл pdf или любой другой внешний контент, объект отправляет запрос на получение для отображения содержимого (запрос на получение можно просмотреть на вкладке сети браузера).

простое решение - добавить строку запроса к вашему пути 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);
          });

Теперь, когда ваш объект пытается выполнить запрос get в файл PDF, каждый запрос будет свежим из-за строки запроса и, следовательно, данные не будут загружаться из кэша.

0 голосов
/ 02 февраля 2019

Чтобы предотвратить / избежать кэширования в версии 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 }
    ]
})

Надеюсь, что решение, приведенное выше, решит вашу проблему!.

...