Angular2模板：如何將keydown.arrow綁定到整個div而不是隻有控件元素？

我有一個簡單的導航組件，有一些按鈕和日期選擇器子組件。現在的想法是，我可以綁定keydown.arrowleft等整個div（它具有100％的高度和寬度的css風格）。它的模板是這樣的：Angular2模板：如何將keydown.arrow綁定到整個div而不是隻有控件元素？

<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，並感謝任何推動正確的方向。

來源

2017-04-01 Christof Kälin

如果您想要檢測整個頁面上的關鍵事件，您需要的可能是將@HostListener添加到組件中。它是讓你管理整個頁面/窗口中的事件。

看一個例子。

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

[您@Component東西.....]

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

onKeyDown(event:KeyboardEvent) { 

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

而且可以幫助你知道，當你要引用特定的項目，你可以使用ElementRef類ViewChild通過其導入角/芯。然後管理DOM組件：

@ViewChild('DOM_Id') element: ElementRef;

也許會有所幫助。和平

來源

2017-04-01 14:55:36 Sam

盧卡的回答是正確的，因爲我的問題不清楚。但你的答案擊中了釘子！它工作順利。現在我終於有了一個（工作）的例子來說明在正常組件內部使用@HostListener的情況。我的書籍示例僅將它用於指令（因爲它們沒有要綁定的模板）。 –

問題是您的div不可聚焦，因此它不會對您的鍵盤綁定產生反應。嘗試將屬性tabindex="0"添加到div。

來源

2017-04-01 14:23:57

Angular2模板：如何將keydown.arrow綁定到整個div而不是隻有控件元素？

回答

相關問題