각 구성 요소의 각진 HostListener

Question

ListComponent라는 구성 요소가 있는데 그 안에 다음 코드가 있습니다.

@HostListener("document:keydown", ["$event"]) 
    handleKeyEvent(event: KeyboardEvent) { 
    switch(event.keyCode) { 
     case 38: //up arrow 
     this.selectPreviousItem(); 
     break; 
     case 40: //down arrow 
     this.selectNextItem(); 
     break; 
    } 
    } 

위쪽 화살표 또는 아래쪽 화살표 키를 누르면 이벤트가 페이지의 구성 요소 인스턴스에 대해 실행됩니다. 집중된 요소에 대해서만 어떻게 이벤트를 발생시킬 수 있습니까?

Answer 1

필자는 지시어를 만들고 포커스를 지정하기 위해 요소에서 호출하는 것이 더 바람직하다고 생각합니다. 소자의

@Directive({ 
    selector: 'focusItem', 
    }) 

    export class MyDirective { 
    constructor() { } 
    @HostListener('focus', ['$event.target']) 
     onFocus(target) { 
     console.log("Focus called 1"); 
     } 
    } 

통화를

<input focusItem>