角度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>