Angular 2+键绑定油门键事件

Question

我这里有一个堆叠闪电战的例子。https://stackblitz.com/edit/angular-jvahcv

我需要的是，按箭头键，上/下键，持续0.5秒。我该如何在Angular 2+中做到这一点。

我不想做的是，订阅所有关键事件，并检查此下或上箭头键是否可以调用专用方法。像这样绑定密钥：

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

更具可读性的代码。

有没有办法做到这一点？

Answer 1

您的问题

您想要：

• 调用按键的功能
• 按住键时限制功能每秒调用一次

我的设计

我将为此使用可观察的东西。模式将是：

• 为keydown事件创建代理主题
• 来自代理主题订阅的呼叫功能
• 为第一个keydown事件设置计时器
• 计时器过去时呼叫代理人
• 将计时器停在下一个keyup上

我的实现

创建一个包含主题的类。它将有一个简单的界面：

• keyDown$: Observable<any>-可观察的代理
• [keyDown()-在每个keydown事件上调用
• [keyUp()-在每个keyup事件上调用]
• complete()-击毁时召唤

如果您想更改计时器期限，可以很容易地将此​​类设置为参数。

export class KeyThrottle {   

  constructor() {
    this.keyDown$ = this._keyDown$.asObservable();
  }

  keyDown$: Observable<any>;

  private _isPressed = false;  
  private _keyDown$ = new Subject();
  private _keyUp$ = new Subject();

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

  keyDown(): void {
    if (this._isPressed) {
      return;
    }

    this._isPressed = true;

    timer(0, 1000)
      .pipe(takeUntil(this._keyUp$))
      .subscribe(() => this._keyDown$.next());
  }

  keyUp(): void {
    this._keyUp$.next();
    this._isPressed = false;
  }
}

您将为要在组件中处理的每个键创建一个新实例：

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

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

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

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

onKeyDownArrowDown() {
  this.throttles.arrowDown.keyDown();
}

onKeyUpArrowDown() {    
  this.throttles.arrowDown.keyUp();
}

onKeyDownArrowUp() {
  this.throttles.arrowUp.keyDown();
}

onKeyUpArrowUp() {
  this.throttles.arrowUp.keyUp();
}

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

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

您的HTML每个要处理的键都有2个事件处理程序。

<div tabindex="-1" 
  (keydown.arrowdown)="onKeyDownArrowDown()" 
  (keyup.arrowdown)="onKeyUpArrowDown()" 
  (keydown.arrowup)="onKeyDownArrowUp()"
  (keyup.arrowup)="onKeyUpArrowUp()" >
  <p>
    Open the console. Click here. Press and hold (Arrow-Up/Down).
  </p>
</div>

DEMO：https://stackblitz.com/edit/angular-erwfby