角度のある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> 

要素でそれを呼び出します