角度HostListener同一组件的多个实例 - 个人工作笔记

登录

2: 关注

1542: 浏览

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

我有一个名为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; 
    } 
    }

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

好问题 0 评论收藏举报

1 回答

kenfu 未验证用户用户来自于: 广东省
2020-09-15 16:34

我认为最好是创建一个指令并在元素中调用它来关注。

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

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

呼叫它在元件

赞同 0 0评论

关于作者

: playingwolf 未验证用户
这家伙很懒，还没有设置简介

0: 回答

0: 文章

2: 问题

问题动态

发布时间: 2020-09-15 15:51

更新时间: 2022-09-15 16:04

关注人数: 2 人关注

相关问题

在角度工人中导入模块？: 1488 浏览 2 关注 1 回答 0 评论

按自定义角度数据表中的列进行过滤: 1407 浏览 2 关注 1 回答 0 评论

角度服务中RxJS主题的上下文处理: 1373 浏览 2 关注 1 回答 0 评论

如何使用四角位置获得3d平面的角度: 1520 浏览 2 关注 1 回答 0 评论

如何呈现多次相同的组件和所有实例具有相同的状态: 1316 浏览 2 关注 1 回答 0 评论

个人工作笔记 Powered BY WeCenter V4.1.0 © 2024 粤ICP备2020123311号