Убрать фокус с тумблера

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 в целом (по крайней мере с теми, которые используют собственный ввод, textarea и выбирают элементы внутри).