Как предотвратить отмену модального режима, если в нем есть несохраненные изменения?

Question

Приложение My Angular создает модальное диалоговое окно, позволяющее пользователю вводить и изменять некоторые свойства. Требуется предупредить пользователя о несохраненных изменениях в модели, когда пользователь пытается отменить модальное (нажмите X или щелкните за пределами модального).

const modal = this.modalService.create({
  nzTitle: title,
  nzContent: MyModalComponent,
  nzComponentParams: {
      // component parameters
  },
  nzFooter: null,
  nzOnCancel: (result) => {
    if (result changed) {
      return;
    } else {
      return new Promise((resolve, reject) => {
         this.modalService.confirm({
           nzTitle: `If you leave, your unsaved changes will be lost. Do you want to leave?`,
           nzOkText: 'Yes',
           nzOkType: 'danger',
           nzOnOk: () => resolve(true),
           nzCancelText: 'No',
           nzOnCancel: () => resolve(false),
         });
       }).catch(() => console.log('cancel'))
    }
  }
});

В приведенном выше коде «результат» не отражает изменения в модальном режиме, поэтому он не работает.

Каков наилучший способ достижения этого?

Answer 1

nzOnCancel может принять экземпляр Компонента в качестве аргументов функции, когда nzContent имеет значение Компонент, эта функция возвращает promise, который автоматически закрывается, когда выполнение завершается или обещание заканчивается (возврат false в предотвратить закрытие).

Вы можете посмотреть онлайн пример здесь:

https://stackblitz.com/edit/ng-zorro-antd-start-rd9gqh

Answer 2

Вы можете просто добавить окно подтверждения, если есть несохраненные изменения. Что-то вроде подтверждения bootbox.

Bootbox использует ссылку на стек через стек

Убедитесь, что z-индекс загрузочной коробки больше, чем у модальной