angular2-hotkeys调用.remove()无法彻底移除快捷键如何解决

问题核心诱因 #

• 类型与返回值不匹配：HotkeysService.add()方法无论传入单个Hotkey实例还是Hotkey数组，运行时永远返回Hotkey[]类型的数组。你当前声明变量时用了Hotkey | Hotkey[]联合类型，没有从返回的数组里取出实际注册的单个快捷键实例，直接把整个数组传给remove()方法时，库内部的删除逻辑存在遗漏：仅从cheatsheet的展示列表里移除了对应项，没有从键盘事件的匹配池里删掉该快捷键的绑定配置，因此按键仍会触发回调。
• 旧版本库bug：v2.1.0之前的angular2-hotkeys版本，remove()方法本身存在事件监听未完全清理的已知问题，就算传入正确的快捷键实例，也可能出现回调残留。

修复方案 #

1. 修正注册与移除的传参逻辑，从add返回的数组中取出实际的快捷键实例再做移除，修正后的可运行代码如下：

import { Component, OnDestroy } from '@angular/core';
import { Hotkey, HotkeysService } from 'angular2-hotkeys';

@Component({
  selector: 'app-your-component',
  template: '' // 替换为你的组件模板
})
export class YourComponent implements OnDestroy {
  // 明确声明为单个Hotkey类型，避免类型混淆
  private hotkeyShiftT: Hotkey;

  constructor(private hotkeysService: HotkeysService) {
    // add返回数组，取索引为0的元素就是本次注册的快捷键实例
    this.hotkeyShiftT = this.hotkeysService.add(new Hotkey(
      'shift+t',
      (event: KeyboardEvent): boolean => {
        alert('hotkey2 test was a success');
        return false;
      },
      undefined,
      'this is a test'
    ))[0];
  }

  ngOnDestroy(): void {
    // 传入正确的单个Hotkey实例完成移除
    this.hotkeysService.remove(this.hotkeyShiftT);
  }
}

2. 兜底兼容处理
   • 如果修正传参后问题仍然存在，先将angular2-hotkeys升级到最新稳定版，旧版本的清理逻辑bug已经在后续迭代中修复。
   • 若项目暂时无法升级依赖，可以在ngOnDestroy中根据场景做手动清理：如果当前服务没有注册其他全局快捷键，直接调用this.hotkeysService.reset()可以清空所有绑定；如果需要保留其他快捷键，可在注册时单独保存回调函数引用，销毁时手动通过document.removeEventListener()解绑对应的keydown事件。

验证小技巧：调用remove方法后打印this.hotkeysService.hotkeys数组，确认目标快捷键实例已经从数组中移除，即可判定解绑逻辑正常。

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