Angular 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>