角度材质垫-滑动-键盘上的切换Enter

Question

我有一个有角度的材料垫-滑动-切换。我无法使用键盘上的tab + enter组合键来切换按钮。

 <mat-slide-toggle>Slide me!</mat-slide-toggle>

如何在键盘上按回车键时切换按钮。

DEMO

Answer 1

您需要添加(keydown.enter)事件来检测enter按钮点击。此外，您还需要绑定变量与垫滑动切换选中的输入打开关闭切换按钮。

在HTML文件中：

<mat-slide-toggle [checked]="checked" (keydown.enter)="onEnter()">Slide me!</mat-slide-toggle>

在.ts文件中：

export class SlideToggleOverviewExample {
  checked: boolean;

  onEnter() {
    console.log("ENTER");
    this.checked = !this.checked;
  }
}

以下是工作演示：

https://stackblitz.com/edit/angular-axf6wk-zivl91

Answer 2

为了捕获键盘事件，我推荐使用HostListener。它使用起来很简单，而且很有效。

示例：

import { HostListener, Component } from "@angular/core";
const KEY_CODE = {
  ENTER:17,
  PLUS:187
}
    
@Component({
  selector: 'app',
  template: `<mat-slide-toggle  [checked]="checked" >Slide me!</mat-slide-toggle>`
})
class AppComponent {

  public checked = false;
  @HostListener('window:keydown', ['$event'])
    handleKeyDown(event: KeyboardEvent) {
        if (event.keyCode === KEY_CODE.ENTER || event.keyCode === KEY_CODE.PLUS) {
        this.checked = true;
        }
  }

}

要查看不同的KEY_CODES，请访问：https://keycode.info/

更多信息：

https://angular.io/api/core/HostListener

https://material.angular.io/components/slide-toggle/overview