时间戳

首页 > 解决方案 > 如何在 ViewChild 中捕获键盘事件

angular - 如何在 ViewChild 中捕获键盘事件

问题描述

使用 Angular 8 和 Boostrap 4，我构建了一个组件，并尝试在网页上捕获键盘事件。在类中，我使用 @HostListener('window:keydown', ['$event']) 和 @ViewChild 来关联按钮的点击和键盘键。我的问题是当一个元素获得焦点时，一些命令停止工作。我相信需要为元素创建 @HostListener 定义，但我不明白如何做到这一点。

我得到了这个代码的元素：

@ViewChild('btnChoose', {static: false}) btnChoose: any;

这就是我的@hostlistener 定义：

  @HostListener('window:keydown', ['$event'])
  keyEvent(event: KeyboardEvent) {
    if ((event.key === ' ') && (this.btnChoose)) {
      this.btnChoose.nativeElement.click();
    }
  }

该元素是一个下拉列表，即模板上的 HTML：

        <div class="btn-group dropup">
          <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
            aria-expanded="false" #btnChoose>
            Choose
          </button>
          <div class="dropdown-menu dropdown-menu-right options-menu m-0 p-0">
            <div *ngFor="let action of scene.getActionList()" class="button-container m-0 p-0"
              (click)="onActionSelected(action)">
              <button *ngIf="action.area == null "
                class="btn button-option {{action.cssClass}}">
                <!--dropdown-item -->
                {{ action | translateAction }}
              </button>
            </div>
          </div>
        </div>

其他键激活其他按钮，但是当下拉菜单获得焦点时，它们停止工作。我希望能够按“Esc”之类的一个键来调用函数“this.btnChoose.nativeElement.blur();” 并使其他选项再次可用。

标签： angulartypescriptdropdownkeyboard-eventsviewchild

解决方案

推荐阅读