@HostListener keydown 事件未在 Ionic 角度的整个页面上触发

Question

我想为我的整个应用捕获 keydown 事件（特别是用箭头键导航）

这适用于任何子组件，但菜单或根或标题级别的东西不起作用。所以用户必须点击组件，然后按下一个键。

我想从我的整个应用中捕获按键

将以下内容添加到我的主 app.component 根本不会触发

  @HostListener('keydown', ['$event'])
  handleKeyboardEventkeydown(event: KeyboardEvent) { 
    console.log('keydown AppComponent:', event.key) // never logs
  }

在我的 home.component（路由器指向的地方）和我实际管理内部页面的子组件中的相同代码。只有在最后一个事件才会触发，但不会在应用程序或家庭组件中触发

我的应用组件 html 是

<ion-app>
  <ion-menu contentId="main-content" type="overlay">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>

      <ion-list>
        <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
          <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
            <ion-icon slot="start" [name]="p.icon"></ion-icon>
            <ion-label> {{ p.title }} </ion-label>
          </ion-item>
        </ion-menu-toggle>
      </ion-list>
    </ion-content>


  </ion-menu>
  <ion-router-outlet id="main-content"></ion-router-outlet>
</ion-app>

如何在 app.component 上获取 HostListener 以捕获按键。或者我还可以如何/在哪里完成这项工作？

Answer 1

将您的主机侦听器代码更改为以下内容：

@HostListener( 'window:keydown', [ '$event' ] )
handleKeyboardEventkeydown(event: KeyboardEvent) { 
    // ...
}

请注意window:keydown 而不是keydown。