Angular 2 keyup.enter 用于 div 标签答案

【问题标题】：Angular 2 keyup.enter for div tagAngular 2 keyup.enter 用于 div 标签
【发布时间】：2017-11-29 05:02:13
【问题描述】：

我需要从选定的 div 中触发一项功能，输入键被按下。我写了以下代码，但它不起作用。

<div class="data_card" *ngIf="!Add.showEdit" (keyup.enter)="myfunction($event)">
<!-- Some content -- >
</div>


myfunction($event){
      $event.preventDefault();
      alert("sadsa");
}

如何在按下 div 回车键时触发此功能？

【问题讨论】：

该 div 内是否有某种输入元素？它怎么知道你在那个 div 里面点击了 enter？
div里面没有输入元素，有些数据只显示在div中
我也有同样的问题。为什么仍然没有接受的答案？

标签： angular angular2-forms keyboard-events

【解决方案1】：

看看这个答案。 How to bind keyboard events to div elements?。

使用标签索引： The tabindex global attribute is an integer indicating if the element can take input focus (is focusable)

【讨论】：

我的应用程序使用 Angular 2 开发。是否可以使用 Angular 2 的东西？
这个答案使用 JQuery，而不是 Angular 2+。

【解决方案2】：

试试这个代码。这有帮助吗？ html

<div class="data_card" *ngIf="!Add.showEdit" (keydown)="handleKeyboardEvent($event)">

//组件

@HostListener('document:keydown', ['$event'])
    handleKeyboardEvent(event: KeyboardEvent): void {
        if (event.keyCode === 13) {
            **// do your code here**
        }
    }

【讨论】：

(keydown)="handleKeyboardEvent($event,index)" 我需要从 html 传递一些其他参数。但是当我像这样传递值时，我变得不确定。如何传递其他参数？
你想传递什么？输入值？
不，我正在使用 ngfor 我需要传递选定的 div 索引值
在您的 ngFor 中添加 i = index 并在事件内的所有 div 元素上添加 i，您应该收到该 div 的事件和索引 (keydown)="handleKeyboardEvent($event , i)"
这个解决方案很棒，可以用于很多事情，也可以使用“event.key”获取按下的键名！