键盘上的角材料垫滑动切换 Enter答案

【问题标题】：Angular material mat-slide-toggle on keyboard Enter键盘上的角材料垫滑动切换 Enter
【发布时间】：2021-05-06 06:12:34
【问题描述】：

我有一个角材质垫滑切换。我无法在键盘上使用 tab + enter 来切换按钮。

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

如何在按键盘上的 Enter 键时切换按钮。

DEMO

【问题讨论】：

你应该使用空格键来切换这个

标签： javascript angular angular-material

【解决方案1】：

您需要添加 (keydown.enter) 事件来检测输入按钮的点击。此外，您还需要将带有 mat slide toggle check 输入的变量绑定到 on off 切换按钮。

在您的 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

【讨论】：

是的，你说得对，但垫滑开关必须有焦点，否则不起作用

【解决方案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

【讨论】：