Подтвердить что ты не робот

Что такое Angular2 способ создания глобальных сочетаний клавиш (горячие клавиши a.k.a.)?

Каким будет правильный способ создания глобальных сочетаний клавиш (горячие клавиши a.k.a.) в приложении Angular2?

Скажем, хорошей отправной точкой было бы работать: "?" для чит-листа и "Alt + s" для отправки формы.

Должен ли я отображать "?" каким-то образом к основному компоненту, а затем разработать директиву атрибутов, который будет применяться к тем компонентам, которые должны реагировать на определенные горячие клавиши, но затем - как я могу запретить входные поля отвечать на "?" .

Ответ 1

Вы можете использовать этот синтаксис в своем шаблоне

<div (window:keydown)="doSomething($event)">click me<div>

чтобы вызвать этот метод в вашем компоненте

doSomething($event) {
  // read keyCode or other properties 
  // from event and execute a command
}

Для прослушивания самого хост-компонента

@Component({
  selector: 'app-component',
  host: { '(window:keydown)': 'doSomething($event)' },
})
class AppComponent { 
  doSomething($event) {
    ...
  }
}

или этим эквивалентным синтаксисом

@Component({
  selector: 'app-component',
})
class AppComponent { 
  @HostListener('window:keydown', ['$event'])
  doSomething($event) {
    ...
  }
}

Ответ 2

Вы можете использовать созданную мной библиотеку angular2-hotkeys

Он позволяет создавать горячие клавиши следующим образом:

constructor(private _hotkeysService: HotkeysService) {
  this._hotkeysService.add(new Hotkey('meta+shift+g', (event: KeyboardEvent) => {
    console.log('Typed hotkey');
    return false; // Prevent bubbling
}));  }

Ответ 3

Простое и элегантное решение будет выглядеть следующим образом: -

Создайте глобальную службу, которая сохранит привязки ярлыков с помощью элементов, которые можно щелкнуть. Примечание: - Используйте NgOnDestroy, для удаления привязок на компоненте уничтожается.

Теперь создайте директиву, которая будет использовать коды клавиш как входные данные.

<button [angularHotKey]="[17,78]">New Document</button>
<!-- CTRL = 17 & n = 78 -->

Теперь в вашем корневом большинстве компонент, прослушивайте нажатия клавиш и используйте их в качестве индексов для поиска элементов в глобальной службе для HotKeys. Теперь о получении ссылки сделайте что-то вроде этого.

Я предполагаю, что вы форматировали записанные коды клавиш в этом формате = 1-23-32 -..., не забудьте отсортировать их по возрастанию/убыванию формата, оба, добавляя его к массиву keypair в сервисе и при проверке

if(this.keypair[combo].length)this.keypair[combo].click();

this.keypair[combo] содержит ссылку на элемент, на который был добавлен angularHotKey directive.

Дальнейшие примечания: 1.) В директиве angularHotKey при добавлении новой ссылки на keypair и element/clickable проверьте, не существует ли спаривания с тем же комбо, если да, дайте исключение, это будет полезно при отладке и не позволит вам совершать глупые ошибки, а в классе Angular 2 компонент, в методе ngOnDestroy определяют логику удаления всех ярлыков в паре с дочерними элементами.

Посетите http://keycode.info/ для получения кодов клавиш для всех типов ключей, присутствующих на вашей клавиатуре.

Несколько нажатий на несколько клавиш jpeg Ответ с каждой мелочью о том, как бороться с нажатием комбинации клавиш