修复“角度-蚂蚁设计模态对话框”-取消按钮自动称为问题

Question

我在Angular项目中使用Ant Design UI库。从该库中，我正在项目中使用其模式组件。我在同一页面上使用了不同类型的模式。我还设置了它的属性，例如按“ Esc”按钮时模态不应关闭。

您可以在此链接上找到其文档！

因此，每当加载角度项目或其页面刷新时，就会对该页面上存在的每个模态调用模态的构造​​函数和ngOnInit（）方法。因此，每当我按下“ Esc”按钮时，尽管模态仍未打开，但模态的关闭动画仍会出现。

这是我的代码，在这里我使用了标志来设置我的打字稿文件中“ [nzKeyboard]”的值，这样一来，“ Esc”按钮将开始起作用，并且无论模式何时执行任何异步处理，我正在更改标志的值，以便在异步过程中模式的“ Esc”按钮将不起作用。

HTML文件代码：

<nz-modal
  [(nzVisible)]="isVisible"
  (nzOnCancel)="handleCancel()"
  (nzOnOk)="handleCreate()"
  [nzOkLoading]="isOkLoading"
  [nzMaskClosable]="!onAsyncProcess"
  [nzClosable]="!onAsyncProcess"
  [nzKeyboard]="!onAsyncProcess"
>
...
</nz-modal>

打字稿文件代码：

onAsyncProcess = false;

async handleCreate() {
   this.isOkLoading = true;
   this.onAsyncProcess = true;

   ... // Async Process

   this.onAsyncProcess = false;
   this.isVisible = false;
   this.isOkLoading = false;
}

handleCancel(): void {
   this.isVisible = false;
}

所以，输出应该是这样的，只要加载页面并且用户在不打开模式的情况下按下“ Esc”按钮，然后按下“ Esc”按钮，就不应调用“ handleCancel（）”并且其关闭动画也不应播放。