在 angular2 中如何检测 Ctrl A 按键？答案

【问题标题】：In angular2 how to detect Ctrl A key press?在 angular2 中如何检测 Ctrl A 按键？
【发布时间】：2018-02-16 11:11:43
【问题描述】：

我有一个项目列表，我试图在选择项目后将文件浏览器之类的文件遍历行为赋予项目列表，如果您按住 shift 键并按下箭头，则应该选择这些项目。

我有一个如下所述的列表。

    <div class="container">
    <ul class="mylist">
    <li  tabindex="1">item1</li>
    <li  tabindex="2">item2</li>
    <li  tabindex="3">item3</li>
    <li tabindex="4">item4</li>
    <li tabindex="5">item5</li>
    <li tabindex="6">item6</li>
    <li tabindex="7">item7</li>
    <li tabindex="8">item8</li>
    <li tabindex="9">item9</li>
    <li tabindex="10">item10</li>
</ul>

如果我使用(keydown.ctrl.a)="handleKey($event, item.name)"，它无法识别 ctrl 和按钮单击。如何在 angular2 中实现这一点？

【问题讨论】：

参考这个：stackoverflow.com/questions/40781064/…

标签： angular

【解决方案1】：

把这个放在handleKey 中，以检测是否按下了 Ctrl + a：

event.getModifierState && event.getModifierState('Control') && event.keyCode===65

DEMO

【讨论】：

在发表此评论时，对于 Chrome，ctrlKey 设置为 false，即使在按下 A 时它被按住。一个真正的痛苦。似乎我们可能必须分别跟踪上下移动的 Ctrl 键。这又是 AngularJS 1.27 ng-input。也许他们从那以后就修好了。
进一步研究表明，问题实际上是由使用 keyup 事件引起的，并且开发人员在提高 A 键之前快速执行并提高了 ctrl 键。花了一个小时的测试来解决这个问题。切换到KeyDown，生活好多了。我认为 event.ctrlKey 是正确使用的代码——不确定 getModifierState 是否真的是跨平台的。事实上，我认为上面的答案是错误的，因为如果 getModifierState 不存在，那么即使他们输入 Ctrl-A，逻辑也会失败。

【解决方案2】：

使用control 代替ctrl：

(keydown.control.a)="handleKey($event, item.name)"

【讨论】：