Angular 8 - RouteGuard CanDeactivate с Promise - PullRequest
0 голосов
/ 03 марта 2020

Итак, у меня есть все эти виды форм для регистрации всех типов данных, если пользователь забыл сохранить и начинает навигацию, я хочу показать диалоговое окно подтверждения, которое говорит что-то вроде:

"Вы сохранили изменения ..... et c et c "" Отменить и продолжить "," Сохранить и продолжить "," Отмена "

Несколько статей об использовании защиты маршрута CanDeactivate, как показано ниже. Но проблема возникает, когда отображается диалоговое окно, событие «NavigationStart» уже запущено. Таким образом, если пользователь нажимает «Отмена» и routeguard возвращает false, компонент формы будет перезагружен.

При использовании обычного синхронного диалога (встроенного) это работает, но при использовании любого вида асинхронного обещания или наблюдаемого эта проблема возникает ..

Кто-нибудь знаком с этой проблемой?

export interface CanDeactivateComponent {
  canDeactivate: () => Promise<boolean>;
  saveChanges?: () => Promise<any> | any;
}

@Injectable()
export class DirtyFormDeactivateGuard implements CanDeactivate<CanDeactivateComponent> {

  public canDeactivateResult: boolean;

  constructor(
    private translateService: TranslateService,
    private dialog: MatDialog) {

  }

  public canDeactivate(component)  {
    return this.showDialog();
  }

  public showDialog() {
    const dialogRef = this.dialog.open(SimpleConfirmDialogComponent, {
      data: {
        title: this.translateService.instant('common.saveChangesTitle'),
        text: this.translateService.instant('common.saveChangesMessage'),
        resolveText: this.translateService.instant('common.saveChangesResolve'),
        rejectText: this.translateService.instant('common.saveChangesReject')
      }
    });

    return dialogRef.afterClosed();
  }
}
...