将keyDown()注册到angular2中的特定组件

时间:2017-05-24 09:55:51

标签: angular angular2-template

我正在尝试使用多个组件构建一个angular2应用程序。它使用自定义和许多第三方UI组件构建。我使用的一个树组件,使用@Hostlistener在文档上注册一个全局keyDown监听器。我的一个组件有一个包含多个选择的表。因此,使用' ctrl'进行简单的选择操作key触发树组件的处理程序。

我的示例用例

  1. 我有一个有树的MyTreeComponent。树需要处理'删除'键并删除节点
  2. MyTreeComponent有4-5个实例(想象一个里面有多棵树的手风琴)
  3. 我在我的组件中的keydown上注册了一个监听器,它有如下所示的树:

    import {HostListener, KeyboardEvent} from '@angular/core';
    
    @Component({...})
    export class MyTreeComponent  {
    
      @HostListener('document:keydown', ['$event'])
      onKeyDown(event:KeyboardEvent) {
      // check if the event is a delete and perform delete action
      }
    }
    
    1. 我有另一个组件,其中包含一个具有行多选功能的表。
    2. 所以,如果我使用ctrl'进行多选键入我的tablecomponent' onKeyUp()'所有4-5 MyTreeComponent实例中的所有实例都被触发了太多次。

      这显着降低了性能。有什么想法可以改进吗?

      还有几个问题

      1. 有没有办法注册特定于组件的Hostlistener?
      2. 有没有办法知道哪个组件在任何时间点都处于活动状态(或焦点)?这样我就可以动态地添加和删除@Hostlistner(如果可能的话)
      3. 提前感谢您的帮助

0 个答案:

没有答案