Question

我已经测试角形材料已有一段时间了，但是我只是遇到了滑动切换组件的问题，并在单击了滑动切换组件后听了键盘事件。

HTML文件

<mat-slide-toggle color="accent" [checked]="likeChecked" (change)="selectedOpt('like')">
    Like
</mat-slide-toggle>
<mat-slide-toggle color="primary" [checked]="dislikeChecked" (change)="selectedOpt('dislike')">
    Dislike
</mat-slide-toggle>

Component.ts文件

selectedOpt(option) {
    if(option === 'like'){
        this.positiveChecked = true;
        this.neutralChecked = false;
    } else {
        this.positiveChecked = false;
        this.neutralChecked = true;
    }
}

因此，每当我单击“喜欢”或“不喜欢”幻灯片切换组件时。该组件变得集中，直到我单击程序中的其他任何地方，它都不允许程序监听键盘事件。

以编程方式单击幻灯片切换组件后，如何聚焦或模糊？为了听键盘事件

Answer 1

默认情况下，当某些元素具有焦点时，热键不会触发事件。 MatSlideToggle在内部使用输入元素，而输入元素就是其中之一。但是您可以强制为特定元素触发热键。这可以在您的StackBlitz中使用：

this._hotkeysService.add(new Hotkey('right', (event: KeyboardEvent): boolean => {
  console.log('right arrow pressed');
  return false;
}, ['INPUT'], 'Move to next slide'));

（有关详细信息，请参见this-他们也有另一种解决方法，但似乎不适用于滑动开关）

问题是，这会影响所有输入（包括单选按钮内部使用的输入），因此这可能会对其他事情产生不利影响，具体取决于您“接管”了哪些关键事件。

我怀疑热键不是与Angular Material以及一般与Angular @Components一起使用的最佳解决方案（至少是在内部使用本机输入，文本区域和内部选择元素的解决方案）。

从mat-slide-toggle移开焦点

1 个答案: