Angular如何通过自定义指令重写ALT+ESC快捷键仅关闭弹窗不关闭应用

问题原因 #

• 键码判断逻辑错误：你当前判断的e.keyCode == 18是Alt键本身的键码，ALT+ESC组合键对应的ESC键的keyCode为27，原有判断条件永远不会触发你写的阻止逻辑，所以系统默认的关闭窗口行为会正常执行
• 事件监听范围有误：你当前仅监听指令绑定元素的keydown事件，只有该元素处于聚焦状态时才会触发回调，无法捕获全局触发的快捷键
• 引用语法错误：首行import语句末尾冗余了dialog.component';片段，属于语法错误

修正方案 #

1. 调整键码判断条件为ALT+ESC的组合匹配
2. 将事件监听改为全局document级别的keydown事件
3. 补全弹窗关闭的逻辑依赖，这里假设你已经有对应的DialogService用来管理应用内弹窗

修正后的完整代码如下：

import { Directive, HostListener } from '@angular/core';
import { DialogService } from './dialog.service'; // 替换为你实际的弹窗服务路径

@Directive({
  selector: '[test-directive]',
  standalone: true // Angular14以下的非standalone项目删除该行即可
})
export class TestDirective {
  constructor(private dialogService: DialogService) {}
  
  @HostListener('document:keydown', ['$event']) 
  onKeyDown(e: KeyboardEvent) {
    // 匹配ALT + ESC组合键
    if (e.altKey && e.keyCode === 27) {          
      e.preventDefault();
      e.stopImmediatePropagation();
      // 调用弹窗服务的关闭最上层弹窗方法，替换为你实际的关闭逻辑
      this.dialogService.closeTopDialog();
    }         
  }
}

额外注意事项 #

• 部分浏览器/操作系统会限制部分系统级快捷键的默认行为阻止，如果上述代码执行后仍会触发窗口关闭，可以尝试把keydown事件换成keyup事件测试
• 指令需要在你的应用根组件或者公共模块中声明/导入，确保全局生效
• 不要在弹窗组件内单独绑定该指令，避免多个弹窗实例重复注册监听事件

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