角度HostListener同一组件的多个实例

• Z时代
• 2024-01-10
• 分类：问答

我有一个名为ListComponent的组件，我在其中有以下代码。角度HostListener同一组件的多个实例

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

当我按下箭头键或向下箭头键时，事件触发页面上组件的所有实例。我如何才能仅针对焦点元素发起事件？

回答：

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

<input focusItem> 

以上是 角度HostListener同一组件的多个实例 的全部内容， 来源链接： utcz.com/qa/265685.html