Angular 2+ событие привязки ключа газа - PullRequest
0 голосов
/ 02 марта 2020

У меня есть пример стек-блиц. https://stackblitz.com/edit/angular-jvahcv

Мне нужно лишь нажать клавишу со стрелкой, клавишу вверх / вниз, скажем, на 0,5 секунды. Как я могу сделать это в Angular 2 +.

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

<div tabindex="-1" (keydown.arrowdown)="logSomething($event)" (keydown.arrowUp)="logSomethingElse($event)">

Это более читаемый код.

Есть ли способ сделать это?

1 Ответ

1 голос
/ 02 марта 2020

Ваша проблема

Вы хотите:

  • Вызов функции для нажатия клавиши
  • Ограничение вызовов функций до одного в секунду

Мой дизайн

Я бы использовал для этого наблюдаемые. Шаблон будет выглядеть следующим образом:

  • Создать прокси Subject для keydown событий
  • Предоставить прокси Subject как Observable с оператором throttleTime
  • Вызов функции из прокси Observable подписка

Моя реализация

Создание класса для переноса темы. Он будет иметь простой интерфейс:

  • keyDown$: Observable<any> - прокси Observable
  • keyDown() - вызываться при каждом keydown событии
  • complete() - вызывается для уничтожения
export class KeyThrottle {   

  constructor(duration: number) {
    this.keyDown$ = this._keyDown$.pipe(
      throttleTime(duration)
    );
  }

  keyDown$: Observable<any>;

  private _keyDown$ = new Subject();

  complete(): void {
    this._keyDown$.complete();
  }

  keyDown(): void {
    this._keyDown$.next();
  }
}

Вы создадите новый экземпляр для каждого ключа, который хотите обработать в своем компоненте:

private throttles = {
  arrowDown: new KeyThrottle(1000),
  arrowUp: new KeyThrottle(1000)
};

ngOnInit() {
  this.throttles.arrowDown.keyDown$.subscribe(() => {
    this.logSomething();
  });

  this.throttles.arrowUp.keyDown$.subscribe(() => {
    this.logSomethingElse();
  });
}

ngOnDestroy() {
  this.throttles.arrowDown.complete();
  this.throttles.arrowUp.complete();
}

private logSomething() {
  console.log('key down pressed');
}

private logSomethingElse() {
  console.log('key up pressed');
}

Ваш HTML имеет обработчик события для ключа, который вы хотите обработать.

<div tabindex="-1" 
  (keydown.arrowdown)="throttles.arrowDown.keyDown()"  
  (keydown.arrowup)="throttles.arrowUp.keyDown()">
  <p>
    Open the console. Click here. Press and hold (Arrow-Up/Down).
  </p>
</div>

DEMO: https://stackblitz.com/edit/angular-tj2ajr

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...