Angular按钮绑定Keydown事件无响应问题排查求助

可以给按钮绑定这类按键事件，你的问题主要来自三个方面：按钮未获取焦点、键盘事件绑定语法错误、模板存在语法问题，具体解决如下：

1. 确保按钮获得焦点 #

按钮的keydown事件只有在元素获得焦点时才会触发。你可以通过以下方式确保按钮能接收键盘事件：

• 通过Tab键手动切换到目标按钮，使其处于激活状态；
• 给按钮添加autofocus属性，让组件初始化后自动获取焦点（适合单个按钮的场景）：

  <button autofocus (click)="back()" (keydown.digit1)="onOne($event, data.someProperty)">1</button>
  

• 若需要动态设置焦点，使用ViewChild获取按钮元素，在数据加载完成后手动设置焦点：

  import { ViewChild, ElementRef, AfterViewInit } from '@angular/core';
  
  // 模板中给按钮添加#btnOne标识
  <button #btnOne (click)="back()" (keydown.digit1)="onOne($event, data.someProperty)">1</button>
  
  // TS代码
  @ViewChild('btnOne') btnOne!: ElementRef<HTMLButtonElement>;
  
  ngAfterViewInit(): void {
    this.data.subscribe(() => {
      setTimeout(() => {
        this.btnOne.nativeElement.focus();
      });
    });
  }
  

2. 修正键盘事件绑定的错误 #

Angular的键盘事件别名有固定命名规则，数字键不能直接用keydown.1，需要使用digit0到digit9的别名：

• 数字1的事件绑定应改为(keydown.digit1)，而非(keydown.1)
• 箭头键的keydown.arrowLeft和keydown.arrowRight写法是正确的，无需修改

3. 修复模板中的语法错误 #

你的模板存在几处语法问题，会导致事件绑定失效：

• 第三个按钮的click属性缺少开头引号：(click)=next()" → (click)="next()"
• <ng-container>标签未正确闭合：<ng-container → </ng-container>
• 最后一个<span>标签未闭合：<span> → </span>

修正后的完整模板代码 #

<ng-container *ngIf="this.data | async as data">
  <form>
    <span>
      <button (click)="back()" (keydown.digit1)="onOne($event, data.someProperty)">1</button>
    </span>
    <span>
      <button (click)="back()" (keydown.arrowLeft)="onArrowLeft($event)">back</button>
    </span>
    <span>
      <button (click)="next()" (keydown.arrowRight)="onArrowRight($event, data.someProperty)">next</button>
    </span>
  </form>
</ng-container>

可选：阻止浏览器默认行为 #

如果按下箭头键时浏览器出现滚动等默认行为，可在事件处理函数中调用event.preventDefault()：

onArrowLeft(event: KeyboardEvent) {
  event.preventDefault();
  console.log('left!');
}

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