Angular模态框未保存变更时阻止关闭的实现方案咨询

这个问题我之前做NzModal开发时也踩过坑——你代码里的result参数根本不是模态框组件内部的变更状态！nzOnCancel的默认result只是模态框关闭操作的返回值，和你组件里的表单/属性修改完全不挂钩，这就是功能失效的核心原因。

最优方案的核心思路是：直接从模态框内容组件的实例中获取变更状态，再根据这个状态决定是否弹出确认警告。下面是具体实现步骤：

第一步：在模态框组件内添加变更判断逻辑 #

首先在你的MyModalComponent里，实现一个方法或属性来判断是否存在未保存变更。如果用Angular表单，直接用FormGroup的dirty属性最方便；如果是手动维护数据，就对比初始数据和当前数据：

// MyModalComponent.ts
import { Component, Input } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-my-modal',
  templateUrl: './my-modal.component.html'
})
export class MyModalComponent {
  @Input() initialData: any; // 接收父组件传入的初始数据
  myForm: FormGroup;
  // 如果不用表单，可维护当前数据
  // currentData: any;

  constructor(private fb: FormBuilder) {
    // 根据实际字段初始化表单
    this.myForm = this.fb.group({
      name: [''],
      description: ['']
    });
  }

  ngOnInit() {
    // 用初始数据填充表单
    this.myForm.patchValue(this.initialData);
    // 非表单场景：复制初始数据到currentData
    // this.currentData = { ...this.initialData };
  }

  // 暴露给父组件的变更判断方法
  hasUnsavedChanges(): boolean {
    // 表单场景：直接返回表单的dirty状态
    return this.myForm.dirty;

    // 非表单场景：对比初始数据和当前数据
    // return JSON.stringify(this.initialData) !== JSON.stringify(this.currentData);
  }
}

第二步：在父组件中通过组件实例获取变更状态 #

创建模态框时，不要依赖nzOnCancel的默认参数，而是通过modal.componentInstance拿到MyModalComponent的实例，调用我们刚才写的hasUnsavedChanges()方法判断：

// 父组件中创建模态框的代码
const modal = this.modalService.create({
  nzTitle: title,
  nzContent: MyModalComponent,
  nzComponentParams: {
    initialData: yourOriginalData // 把初始数据传给模态框组件
  },
  nzFooter: null,
  nzOnCancel: () => {
    // 获取模态框内容组件的实例
    const modalComp = modal.componentInstance as MyModalComponent;
    
    // 如果有未保存变更，弹出确认框
    if (modalComp.hasUnsavedChanges()) {
      return this.modalService.confirm({
        nzTitle: `If you leave, your unsaved changes will be lost. Do you want to leave?`,
        nzOkText: 'Yes',
        nzOkType: 'danger',
        nzOnOk: () => Promise.resolve(true), // 确认关闭，返回resolved的Promise
        nzCancelText: 'No',
        nzOnCancel: () => Promise.resolve(false) // 取消关闭，返回false阻止关闭
      });
    }

    // 没有变更，直接允许关闭
    return true;
  }
});

关键原理说明 #

NzModal的nzOnCancel支持三种返回值：

• 返回false：直接阻止模态框关闭
• 返回true：允许关闭
• 返回一个Promise：根据Promise的resolved值决定是否关闭（resolved为true则允许，false则阻止）

我们直接把confirm弹窗的Promise返回给nzOnCancel，就能完美实现“确认就关闭，取消就留在模态框”的逻辑。

内容的提问来源于stack exchange，提问作者user2777473