从 mat-slide-toggle 移除焦点答案

【问题标题】：Remove focus from mat-slide-toggle从 mat-slide-toggle 移除焦点
【发布时间】：2019-03-23 18:07:44
【问题描述】：

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

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;
    }
}

所以每当我点击喜欢或不喜欢滑动切换组件时。该组件获得焦点，它不会让程序监听键盘事件，直到我单击程序中的其他任何位置。

如何在以编程方式单击滑动切换组件后散焦或模糊？为了监听键盘事件

【问题讨论】：

请提供一个stackblitz示例
我添加了依赖项（angular2-hotkeys），用于监听键盘事件，例如右箭头。看一下控制台，它会显示正在记录日志，但是一旦您单击滑动切换或任何其他有角度的材料组件。他们不允许任何其他事件Here is the example

标签： jquery angular angular-material

【解决方案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 来说不是一个很好的解决方案（至少在内部使用原生输入、文本区域和选择元素的那些）。

【讨论】：

是的，这正是我所需要的。谢谢，我没有看到该功能，您是对的，它可能不是最佳解决方案。您是否推荐其他依赖项来执行此操作？
或者我应该参加常规的 keyup 活动
我不知道你想要实现的范围，所以我不能说常规的 keyup 是否是最好的。至于其他类似的包 - 我不知道 - 抱歉。
您始终可以使用热键，只需为默认情况下不响应的特定事物添加一个关键监听器 - 这可能是一个安全的中间立场。如果您重构侦听器函数以便可以共享它们，那么您可以创建一个侦听器“主”函数，该函数仅在必要时使用，并调用与热键一起使用的相同“键”函数。
是的，最好使用特定组件的 keyup 事件并调用您提到的热键函数。我不想失去在输入或文本区域内移动的功能。感谢您的帮助