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'))
}
}
});
在上面的代码中,"结果"不反映模态的变化,因此它不起作用。
实现它的最佳方法是什么?
如果有任何未保存的更改,您可以添加"确认"框警报。像引导盒这样的东西确认。
引导盒使用堆栈溢出链接
确保引导盒的 z 索引大于模态的 z 索引
nzContent
是组件时,nzOnCancel
可以接受组件实例作为函数参数,此函数返回一个promise
,当执行完成或承诺结束时自动关闭(返回false
以防止关闭(。
您可以在此处查看在线示例:
https://stackblitz.com/edit/ng-zorro-antd-start-rd9gqh