Angular Ignore событие выхода из страницы при загрузке файла - PullRequest
Новая
       30

Angular Ignore событие выхода из страницы при загрузке файла

1 голос
/ 14 апреля 2019

В моем приложении Angular 7 есть функция canDeactivate для предупреждения пользователя о несохраненных изменениях.Этот охранник также защищает от ухода со страницы 

  @HostListener('window:beforeunload')
  public canDeactivate(): boolean {
    return this.contentChanged === false;
  }

На той же странице у меня есть функция для загрузки с AWS S3 

  async downloadAttachment(url: string, e: any) {
    const target = e.target || e.srcElement || e.currentTarget;
    window.onbeforeunload = null;
    if (!target.href) {
      e.preventDefault();
      target.href = await this.storageService.getDownloadLink(
        url,
      );
      target.download = this.storageService.getFileName(url);
      target.click();
    }
  }

Проблема в том, что у меня есть несохраненные изменения (contentChanged= true), загрузка вызовет окно: событие beforeunload, и браузер выдаст предупреждение enter image description here

, и пользователь должен нажать «Выйти», чтобы загрузить файл.Процесс загрузки не покидает страницу на самом деле.

Я пытался добавить "window.onbeforeunload = null" в коде, но он не работает в моем коде.

Как разрешить пользователю загружать файлы, не видя ничего не значащего предупреждения?

1 Ответ

1 голос
/ 14 апреля 2019

Вы можете определить флаг isDownloadingFile в охране и установить его перед началом загрузки: 

constructor(private canDeactivateGuard: CanDeactivateGuard) { }

async downloadAttachment(url: string, e: any) {
  const target = e.target || e.srcElement || e.currentTarget;
  if (!target.href) {
    e.preventDefault();
    this.canDeactivateGuard.isDownloadingFile = true; // <---------------- Set flag
    target.href = await this.storageService.getDownloadLink(url);
    target.download = this.storageService.getFileName(url);
    target.click();
  }
}

Затем вы должны проверить и сбросить этот флаг в canDeactivate: 

@Injectable()
export class CanDeactivateGuard {

  public isDownloadingFile = false;

  @HostListener('window:beforeunload')
  public canDeactivate(): boolean {
    const result = this.isDownloadingFile || !this.contentChanged; // <--- Check flag
    this.isDownloadingFile = false; // <---------------------------------- Reset flag
    return result;
  }

  ...
}
...