Question

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

<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缺乏了解，并感谢任何正确方向的推动。

Answer 1

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

Answer 2

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

看一个例子。

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

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

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

 onKeyDown(event:KeyboardEvent) {

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

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

@ViewChild('DOM_Id') element: ElementRef;

也许有帮助。和平

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

2 个答案: