2017-12-26 58 views
0

アングルプロジェクトがあり、矢印キーにいくつかの機能を実装したいと考えています。(keyup.[keyCode])="Move(itemArray, 'UP')のようなものを使用しようとしました。[keyCode]ここで私がこれを使うテンプレートがあります。アングルでキーアップを使用して矢印キーを使用する

テンプレート(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> 

答えて

3

、それはという印象を作成この機能はキーコードをサポートせず、キー名のセットのみをサポートします。

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

数値の代わりに名前を使用することに注意してください。

1

あなただけのキーが入力された取得したい場合は、行うことができます:角のrelevant pull requestを探る

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

    move(event: any) { 
     console.log(event.keycode); 
    } 
関連する問題