介绍
当绑定到Angular 2+ 模板中的keyup或keydown事件时，您可以指定键名。这将应用要应用于事件的过滤器，因此只有在按下特定键时才会触发。
在本文中，您将学习如何在侦听keyup和keydown事件时使用键名。
使用键名
首先，让我们看一个不使用键名的例子。
假设我们有一个<input>元素供用户提供信息。我们想在用户按下ENTER按键时登录到控制台：
<input (keydown)="onKeydown($event)">
我们已经绑定了一个keydown触发的事件处理程序onKeydown()：
接下来，让我们编写onKeydown()处理按键的函数ENTER：
onKeydown(event) {
if (event.key === "Enter") {
console.log(event);
}
}
对每个keydown事件执行检查以确定event.key值是否为Enter。如果true，我们将 记录event到控制台。
现在是相同的示例，但ENTER在事件中添加了键名：
<input (keydown.enter)="onKeydown($event)">
我们绑定了一个keydown.enter 伪事件处理程序来触发onKeydown()：
接下来，让我们重写onKeydown()函数：
onKeydown(event) {
console.log(event);
}
通过依赖 Angular 的keydown.enter伪事件，不再需要手动检查event.key值是否为Enter。
使用特殊修饰键和组合
此功能适用于特殊和修饰键，如ENTER、转义 ( ESC) SHIFT、ALT、TAB、BACKSPACE、 和命令 ( meta )：
| 钥匙 | 键名 |
|---|---|
ENTER |
<input (keydown.enter)="..."> |
ESC |
<input (keydown.esc)="..."> |
ALT |
<input (keydown.alt)="..."> |
TAB |
<input (keydown.tab)="..."> |
BACKSPACE |
<input (keydown.backspace)="..."> |
CONTROL |
<input (keydown.control)="..."> |
COMMAND |
<input (keydown.meta)="..."> |
但它也适用于字母、数字、箭头和功能键（F1通过F12）：
| 钥匙 | 键名 |
|---|---|
A |
<input (keydown.a)="..."> |
9 |
<input (keydown.9)="..."> |
ARROWUP |
<input (keydown.arrowup)="..."> |
F4 |
<input (keydown.f4)="..."> |
您也可以将按键组合在一起，仅在触发组合键时触发事件。在下面的例子中，只有同时按下CONTROL和1键才会触发事件：
<input (keyup.control.1)="onKeydown($event)">
以下是更多示例，可让您了解可能的情况：
| 钥匙 | 键名 |
|---|---|
SHIFT+ESC |
<input (keydown.shift.esc)="..."> |
SHIFT+ARROWDOWN |
<input (keydown.shift.arrowdown)="..."> |
SHIFT+CONTROL+Z |
<input (keydown.shift.control.z)="..."> |
结论
你已经学会2+模板支持如何角过滤与主要名称keyup和keydown伪事件。
这种方法的好处包括减少对键值的重复手动检查以及处理修饰键和非修饰键组合。
如果您想了解有关 Angular 的更多信息，请查看我们的 Angular 主题页面以获取练习和编程项目。
