html - Angular2 模板 : How to bind keydown. 箭头指向整个 div 而不是仅控制元素？

Question

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

<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)。 这是有效的，但前提是我提前主动选择了一个按钮或日期选择器(也称为控制元素)。是否有可能将键绑定(bind)扩展到整个 div(即，如果我只是单击网站上的某个地方)。抱歉，我对 DOM 缺乏了解，感谢您在正确方向上的努力。

Answer 1

问题是您的 div 不可聚焦，因此它不会对您的键绑定(bind)使用react。尝试将属性 tabindex="0" 添加到 div。