Question

我有一个Angular项目，我想实现箭头键的一些功能，我尝试使用类似(keyup.[keyCode])="Move(itemArray, 'UP') _where [keyCode]代表箭头键之一的代码_But没有任何作用，这里的模板在哪里我用这个。

模板（HTML）

 <div (keyup.38)="Move(itemArray, 'UP')"
     (keyup.37)="Move(itemArray, 'LEFT')"
     (keyup.40)="Move(itemArray, 'DOWN')"
     (keyup.39)="Move(itemArray, 'RIGHT')">
  <div>
    <div class="score">
      <span>Best:</span>
      {{best}}
    </div>
    <div class="score">
      <span>Score:</span>
      {{score}}
    </div>
  </div> <br>
  <div class="game-container">
    <div class="grid-container">
      <div *ngFor="let item of itemArray">
        <div class="grid-cell-{{item.level|number}}">
          <span>{{item.level}}</span>
        </div>
      </div>
    </div>
  </div>
  <div class="button-container">
    <div>
      <button class="empty"></button>
    </div>
    <div>
      <button class="control-button" (click)="Move(itemArray, 'UP')">Up</button>
    </div>
    <div>
      <button class="empty"></button>
    </div>
    <div>
      <button class="control-button" (click)="Move(itemArray, 'LEFT')">Left</button>
    </div>
    <div>
      <button class="control-button" (click)="Move(itemArray, 'DOWN')">Down</button>
    </div>
    <div>
      <button class="control-button" (click)="Move(itemArray, 'RIGHT')">Right</button>
    </div>
  </div>
</div>

Answer 1

探索Angular的relevant pull request，它给人的印象是此功能不支持键码，而只支持一组键名。

(keyup.arrowup)="Move(itemArray, 'UP')"
(keyup.arrowleft)="Move(itemArray, 'LEFT')"
(keyup.arrowdown)="Move(itemArray, 'DOWN')"
(keyup.arrowright)="Move(itemArray, 'RIGHT')"

注意使用名称而不是数字。

Answer 2

如果您只想输入密钥，可以执行以下操作：

   <button class="control-button" (keydown)="move($event)"></button>

    move(event: any) {
         console.log(event.keycode);
    }

使用箭头键，使用Angular

2 个答案: