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

Question

我有一个简单的导航器组件,包含一些按钮和日期选择器子组件.现在我的想法是,我可以绑定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>

我没有显示组件代码,这个问题无关紧要(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}!`);
  }

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

@ViewChild('DOM_Id') element: ElementRef;

也许有帮助。和平