Angular2模板：如何将keydown.arrow绑定到整个div而不仅仅是控制元素？

Question

我有一个简单的导航器组件，其中包含一些按钮和日期选择器子组件。现在的想法是，我可以为整个 div 绑定 keydown.arrowleft 等按键事件（该 div 具有 100% 高度和宽度的 CSS 样式）。它的模板如下：

<div id="ck-navigator" (keydown.arrowleft)="decrementDate(); 
    $event.preventDefault()" (keydown.arrowright)="incrementDate(); 
$event.preventDefault()">
    <button (click)="decrementDate()" class="fa fa-2x fa-chevron-left">
    </button>
    <ck-date-picker [date]="date" (dateChange)="changeDate($event)">
    </ck-date-picker>
    <button (click)="incrementDate()" class="fa fa-2x fa-chevron-right"></button>
</div>

我不会展示组件代码，因为这对于这个问题来说并不重要（就我所知）。 目前这个代码是有效的，但只有当我事先主动选择按钮或日期选择器等控制元素时才有效。是否有可能将按键绑定扩展到整个div上（即如果我只是在网站上点击某个地方）。对不起，我对DOM的理解有限，感谢任何推动正确方向的帮助。

- Christof Kälin

Answer 1

问题在于您的 div 元素无法聚焦，因此它不会响应键绑定。尝试向 div 添加属性 tabindex="0"。

- Luca Regazzi

---

谢谢!! 我调试了一个小时直到看到了你的答案。 - Maya Nastasya

Answer 2

如果你想在整个页面上检测关键事件，你需要为组件添加@HostListener。这将允许你管理整个页面/窗口中的事件。

看一个例子。

import { Component, HostListener } from '@angular/core';

[your @Component stuff ..... ]

@HostListener("window:keydown", ['$event'])

 onKeyDown(event:KeyboardEvent) {

    console.log(`Pressed ${event.key}!`);
  }

此外，当您想引用特定项时，可以使用ElementRef类和ViewChild通过从angular/core导入它们。然后按以下方式管理DOM组件：

@ViewChild('DOM_Id') element: ElementRef;

也许这有所帮助。祝平安。

- Sam

---

Luca的回答是正确的，因为我的问题不清楚。但是你的回答正中要害！它运行顺畅。现在我终于有了一个（可工作的）示例，说明如何在普通组件内使用@HostListener。我的书中的示例仅用于指令（因为它们没有模板可以绑定）。 - Christof Kälin

我想从特定元素获取事件，而不是从窗口获取。我该怎么做？我不明白如何使用@viewChild来实现这个目的？ - canbax