简介

在绑定角度2+模板中的keyup或keydown事件时，可以指定_Key NAMES_。这将对该事件应用一个筛选器，因此它将仅在按下特定键时触发。

在本文中，您将了解如何在监听keyup和keydown事件时使用key名称。

使用密钥名称

首先，让我们看一个不使用键名的示例。

假设我们有一个供用户提供信息的<input>元素。当用户按Enter键时，我们想要登录控制台：

1<input (keydown)="onKeydown($event)">

我们已经绑定了一个激发onKeydown()的keydown事件处理程序：

接下来，让我们编写onKeydown（)函数来处理按下ENTER键：

1onKeydown(event) {
2  if (event.key === "Enter") {
3    console.log(event);
4  }
5}

对每个keydown事件执行检查，以确定event.key值是否为Enter。如果为true，则将事件记录到控制台。

现在是相同的示例，但在事件中添加了Enter键名称：

1<input (keydown.enter)="onKeydown($event)">

我们已经绑定了一个激发onKeydown()的keydown.enter_伪事件处理程序：

接下来，我们重写onKeydown()函数：

1onKeydown(event) {
2  console.log(event);
3}

通过依赖角度的keydown.enter伪事件，不再需要手动检查event.key值是否为Enter。

使用特殊修改键和组合

该功能适用于ENTER、ESC转义(ESC)、SHIFT、ALT、TAB、BACKSPACE`、COMMAND(META )等特殊键和修饰键：

密钥(S)|密钥名称

但它也适用于字母，数字，箭头和功能键（F1到F12)：

密钥(S)|密钥名称

A|<input(keydown.a)=...> 9|<input(keydown.9)=...> ARROWUP|<input(keydown.arrowup)=...> F4|<input(keydown.f4)=...>

以下是能够过滤角度的Key Values的完整列表。

您还可以将键组合在一起，以便仅在组合键被触发时才触发事件。在下面的示例中，只有同时按CONTROL和1键才会触发该事件：

1<input (keyup.control.1)="onKeydown($event)">

下面是一些更多的例子，让你对可能的事情有一个概念：

密钥(S)|密钥名称

SHIFT+ESC|<INPUT(keydown.shit.esc)=...> SHIFT+ARROWDOWN|<INPUT(keydown.shit.arrowdown)=...> SHIFT+CONTROL+z|<INPUT(keydown.shit.control.z)=...>

结论

您已经学习了Angular 2+模板如何支持使用keyup和keydown伪事件过滤键名称。

这种方法的好处包括减少对键值的重复手动检查，以及处理修改键和非修改键组合。

如果您想了解更多有关ANGLE的信息，请查看我们的ANGLE主题页面以获取练习和编程项目。

如何在 Angular 中将特定键绑定到按键上和按键下事件

简介

使用密钥名称

使用特殊修改键和组合

结论