如果模态中有未保存的更改，如何防止取消模态？答案

【问题标题】：How to prevent cancel modal if there is unsaved changes in the modal?如果模态中有未保存的更改，如何防止取消模态？
【发布时间】：2023-03-26 15:02:01
【问题描述】：

我的 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'))
    }
  }
});

在上面的代码中，“结果”并没有反映模态的变化，因此它不起作用。

实现它的最佳方法是什么？

【问题讨论】：

标签： angular modal-dialog ng-zorro-antd

【解决方案1】：

如果有任何未保存的更改，您可以添加一个确认框提醒。类似 bootbox 的确认。

Bootbox use stackoverflow link

确保 bootbox 的 z-index 大于 modal 的 z-index

【讨论】：

【解决方案2】：

nzOnCancel可以在nzContent为Component时接受Component实例作为函数参数，该函数返回一个promise，当执行完成或promise结束时自动关闭（返回false到防止关闭）。

您可以在此处查看在线示例：

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

【讨论】：