Итак, у меня есть все эти виды форм для регистрации всех типов данных, если пользователь забыл сохранить и начинает навигацию, я хочу показать диалоговое окно подтверждения, которое говорит что-то вроде:
"Вы сохранили изменения ..... 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();
}
}