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

Question

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

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

单击时我想运行仅当按下键 'a' 时代码 addAnnotation:

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

你知道怎么做吗？

更新

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

Answer 1

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

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

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

Answer 2

1/ 你必须让你的组件可聚焦

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

并且为了防止大纲出现在 uin 你的 ui 中，你可以添加 css

 :host { outline: none !important }

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

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

detect key that has been press on mouse click in Angular 2