使用箭头键,在 Angular 中使用 keyup [英] use arrow keys, with keyup in Angular
本文介绍了使用箭头键,在 Angular 中使用 keyup的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个 Angular 项目,我想实现一些箭头键的功能,我尝试使用类似 (keyup.[keyCode])="Move(itemArray, 'UP')
的东西_其中 [keyCode] 表示箭头键之一的代码_但没有任何作用,这是我使用它的模板.
模板 (HTML)
<div (keyup.38)="Move(itemArray, 'UP')"(keyup.37)="移动(itemArray, 'LEFT')"(keyup.40)="移动(itemArray, 'DOWN')"(keyup.39)="移动(itemArray, 'RIGHT')"><div class="score"><span>最佳:</span>{{最好的}}</div><div class="score"><span>得分:</span>{{分数}}</div></div><br><div class="游戏容器"><div class="网格容器"><div *ngFor="let item of itemArray"><div class="grid-cell-{{item.level|number}}"><span>{{item.level}}</span></div></div></div></div><div class="按钮容器"><button class="empty"></button></div><button class="control-button" (click)="Move(itemArray, 'UP')">Up</button></div><button class="empty"></button></div><button class="control-button" (click)="Move(itemArray, 'LEFT')">左</button></div><button class="control-button" (click)="Move(itemArray, 'DOWN')">向下</button></div><button class="control-button" (click)="Move(itemArray, 'RIGHT')">右</button></div></div></div> 解决方案探索Angular的相关拉取请求,给人的印象是这个功能不支持键码,只支持一组键名.
(keyup.arrowup)="Move(itemArray, 'UP')"(keyup.arrowleft)="移动(itemArray, 'LEFT')"(keyup.arrowdown)="移动(itemArray, 'DOWN')"(keyup.arrowright)="移动(itemArray, 'RIGHT')"
注意使用名称而不是数字.
I have an Angular project, and I want to implement some functions to arrow keys, I tried to use something like (keyup.[keyCode])="Move(itemArray, 'UP')
_where [keyCode] represents the code of one of arrow keys_But nothing works, here's the template where I use this.
The Template (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>
解决方案 Exploring Angular's relevant pull request, it created the impression that this feature does not support key codes, but only a set of key names.
(keyup.arrowup)="Move(itemArray, 'UP')"
(keyup.arrowleft)="Move(itemArray, 'LEFT')"
(keyup.arrowdown)="Move(itemArray, 'DOWN')"
(keyup.arrowright)="Move(itemArray, 'RIGHT')"
Notice the usage of names instead of numbers.
这篇关于使用箭头键,在 Angular 中使用 keyup的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆