检测在Angular 2中单击鼠标时按下的键答案

【问题标题】：detect key that has been press on mouse click in Angular 2检测在Angular 2中单击鼠标时按下的键
【发布时间】：2018-01-09 12:57:06
【问题描述】：

我有一个 div 绑定到点击事件的 angular 2 组件：

<div #myDiv class="myClass"
    (click)="addAnnotation($event)">
</div>

点击时我想仅在按下“a”键时运行代码 addAnnotation：

addAnnotation(event) {
    if (the key 'a' is pressed) {
        code to run
    }
}

你知道怎么做吗？

更新

我知道输入上有可用的键盘事件，但我在这里询问是否可以检测鼠标单击时按下了哪个键。原因是我想在点击的点上附加一个动态创建的元素，只有在按下“a”键时。

【问题讨论】：

你可以直接检测输入而不是div
对不起 Sajeethraran 但你失去了我。你能说得更清楚一点吗？基本上，当我单击 DIV 中的某个点时，我想附加一个动态创建的元素，但前提是按下键“a”。
@Sajeetharan 表示您无法在 div 上检测到它，因为click 是一个鼠标事件并在鼠标左键单击时触发。当你想要a 时，a 是键盘上的一个键，它被称为KeyBoard 事件。键盘事件仅适用于您可以关注的元素，例如：输入
鼠标和按键事件通常不组合。似乎是不寻常的要求
我知道鼠标和按键事件通常不会组合在一起。请查看我的更新以了解我想要实现的目标。我愿意接受其他想法

【解决方案1】：

这是example stackblitz

1/ 你必须让你的组件具有焦点

  @HostBinding('attr.tabIndex') tabIndex = -1;

为了防止大纲破坏你的用户界面，你可以添加 css

 :host { outline: none !important }

2/ 然后你可以监听 keypress 事件来存储当前的活动键，并且 keyup 来刷新它。

3/ 然后在单击时，检查活动键以查看是否按下了“a”并运行您的代码。

【讨论】：

【解决方案2】：

您关注的是keydown/keyup 事件，而不是click 事件。

不过，这些事件只能通过可聚焦元素获得，例如 <input />。

一般来说，我会将console.log $event 参数发送给您，看看我拥有什么。

【讨论】：