Angular2 Templates : keydown.arrow를 컨트롤 요소 대신 div 전체에 바인딩하는 방법?

일부 버튼과 날짜 선택기 하위 구성 요소가있는 간단한 탐색기 구성 요소가 있습니다. 이제는 전체 div (100 % 높이와 너비의 CSS 스타일)에 keydown.arrowleft 등을 바인딩 할 수 있다는 아이디어가 있습니다. 템플릿은 다음과 같습니다.Angular2 Templates : 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를 사용하는 방법에 대한 예제를 마침내 보았습니다. 내 book-example은 지시어에만 사용되었습니다 (바인딩 할 템플릿이 없기 때문에). –

문제는 div가 포커스를받을 수 없으므로 키 바인딩에 반응하지 않는 것입니다. div에 속성 tabindex="0"을 추가하십시오.

출처

2017-04-01 14:23:57

Angular2 Templates : keydown.arrow를 컨트롤 요소 대신 div 전체에 바인딩하는 방법?

답변

관련 문제