Angular Keyboard Service：窗口外按键状态追踪异常问题求助

你的问题核心是窗口失焦后未捕获到keyup事件，导致存储的按键状态与实际不符。以下是两种更可靠的替代方案：

方案一：监听窗口焦点事件重置按键状态 #

当页面重新获得焦点时，直接重置Ctrl键的状态（此时用户若未按住Ctrl，状态应为false；若仍按住，浏览器会在页面聚焦后补发keydown事件更新状态）。修改你的KeyboardService：

export class KeyboardService {

  private readonly _keys = new Map<Keyboard.Codes, boolean>();
  public readonly keyEvents = new Subject<KeyBoardEvent>();

  constructor() {
    // 原有keyup/keydown监听
    fromEvent(window, 'keyup').subscribe((event) => {
      const e = event as unknown as KeyboardEvent;
      this._keys.set(e.code as Keyboard.Codes, false);
      this.keyEvents.next({
        origin: 'keyup',
        keyCode: e.code as Keyboard.Codes
      });
    });
    fromEvent(window, 'keydown').subscribe((event) => {
      const e = event as unknown as KeyboardEvent;
      this._keys.set(e.code as Keyboard.Codes, true);
      this.keyEvents.next({
        origin: 'keydown',
        keyCode: e.code as Keyboard.Codes
      });
    });

    // 新增窗口焦点监听，重置Ctrl键状态
    fromEvent(window, 'focus').subscribe(() => {
      this._keys.set(Keyboard.Codes.ControlLeft, false);
      this._keys.set(Keyboard.Codes.ControlRight, false);
    });
  }

  public get isCtrlDown(): boolean {
    return !!this._keys.get(Keyboard.Codes.ControlLeft) || !!this._keys.get(Keyboard.Codes.ControlRight);
  }
}

方案二：直接在点击事件中读取event.ctrlKey #

不需要维护全局按键状态，在按钮的点击事件里直接通过鼠标事件对象的ctrlKey属性判断——点击发生时浏览器会实时检测按键状态，完全避免状态同步问题，推荐优先使用：

// 按钮组件中的点击处理函数
openContent(event: MouseEvent): void {
  if (event.ctrlKey) {
    // 打开新标签页逻辑
    window.open('/target-url', '_blank');
  } else {
    // 打开对话框逻辑
    this.dialogService.open(YourDialogComponent);
  }
}

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