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

【问题标题】：Angular2 Templates: How to bind keydown.arrow to whole div instead of only control elements?Angular2 模板：如何将 keydown.arrow 绑定到整个 div 而不仅仅是控制元素？
【发布时间】：2017-04-01 14:01:14
【问题描述】：

我有一个简单的导航器组件，其中包含一些按钮和一个日期选择器子组件。现在的想法是，我可以为整个 div 绑定keydown.arrowleft 等（其具有 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>

我不显示组件代码，这对这个问题没有关系（afaik）。这是有效的，但前提是我提前主动选择了一个按钮或日期选择器（又名控制元素）。是否有可能将键绑定扩展到整个 div（即，如果我只是单击站点上的某个位置）。抱歉，我对 DOM 缺乏了解，感谢您朝着正确的方向努力。

【问题讨论】：

标签： html css angular

【解决方案1】：

问题是您的 div 不可聚焦，因此它不会对您的键绑定做出反应。尝试将属性tabindex="0" 添加到 div。

【讨论】：

谢谢！！调试了一个小时，直到我找到你的答案。

【解决方案2】：

如果您想要检测整个页面上的关键事件，您可能需要将@HostListener 添加到您的组件中。它可以让您管理整个页面/窗口中的事件。

看一个例子。

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

[你的@Component 东西.....]

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

 onKeyDown(event:KeyboardEvent) {

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

此外，可以帮助您了解，当您想要引用特定项目时，您可以通过从 angular/core 导入 ElementRef 类和 ViewChild 来使用它们。然后将 DOM 组件管理为：

@ViewChild('DOM_Id') element: ElementRef;

也许有帮助。和平

【讨论】：

Luca 的回答是正确的，因为我的问题不清楚。但是你的答案很中肯！它工作顺利。现在我终于有了一个（工作）示例，说明如何在普通组件内部使用 @HostListener。我的书本示例仅将其用于指令（因为它们没有要绑定的模板）。
我想从特定元素中获取事件。不是从窗口。我怎么能那样做？我不明白我该如何使用 @viewChild 来达到这个目的？