Angular 15中如何按Esc键关闭mat-dialog并实现取消按钮相同效果

当然可以实现这个需求，由于你当前设置了disableClose: true，默认的Esc键关闭行为被禁用了，我们可以通过手动监听Esc键事件来触发取消逻辑，以下是两种可行方案：

方案一：在对话框组件内部监听Esc键（推荐） #

将Esc键的处理逻辑封装在对话框组件中，符合组件化设计原则：

修改对话框组件的TypeScript代码，添加@HostListener监听Esc键按下事件：

import { Component, HostListener } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'app-dialog',
  templateUrl: './dialog.component.html'
})
export class DialogComponent {
  constructor(public dialogRef: MatDialogRef<DialogComponent>) {}

  submit(){  
    this.dialogRef.close(myData); // 你的提交逻辑数据
  }
  
  cancel(){   
    this.dialogRef.close('cancel');
  }

  // 监听全局Esc键按下事件
  @HostListener('document:keydown.escape', ['$event'])
  handleEscapeKey(event: KeyboardEvent) {
    // 调用已有的cancel方法，确保逻辑完全一致
    this.cancel();
  }
}

方案二：在父组件中监听对话框的键盘事件 #

如果你希望在父组件中统一处理，可以订阅对话框的keydownEvents：

修改父组件的代码：

const myDialog = this.operationDialog.open(DialogComponent, {
  disableClose: true,          
});

// 监听对话框的键盘事件
myDialog.keydownEvents().subscribe(event => {
  if (event.key === 'Escape') {
    myDialog.close('cancel');
  }
});

myDialog.afterClosed().subscribe((result) => {
  if (result !== 'cancel') {
    // 处理提交后的逻辑
  } else {
    // 处理取消操作的逻辑
  }
});

说明 #

• 两种方案都保留了disableClose: true的设置，确保点击对话框外部不会关闭对话框，仅通过按钮和Esc键触发关闭。
• 方案一的优势在于将对话框的交互逻辑内聚在组件内部，便于维护和复用；方案二则适合需要在父组件中集中控制对话框行为的场景。

内容的提问来源于stack exchange，提问作者R. Nourmandi