Angular2のliタグのkeydownイベントにバインドする方法は？

Question

を使用して(click)="onSelect(hero)をクリックすると、liタグのクリックイベントにバインドできます。 タグのmouseoverイベントにバインドすることもできます。 しかし、私は​​のイベントliのタグにバインドすることはできません。 liタグはclick,mouseover,keydownをサポートしていますので、このリストボックスの次の項目に移動するには​​イベント（下向き矢印）を使用できます。

私が探している公式文書はどこですか？

<div class = "body-container"> 
     <ul class = "heroes"> 
      <li *ngFor = "let hero of heroes" (click)="onSelect(hero)" (keydown)="onKeydown()" (mouseover)="onKeydown()" class="bl-list-item" [class.bl-list-item-checked]="hero === selectedHero"> 
       <div class="guide-label"> 
        <span style="width:50px" [class.fa-check]="hero === selectedHero" [class.li-fa-check]="hero === selectedHero"></span> 
        <div class="guide-code-column">{{hero.id}}</div> 
        <div class="guide-name-column">{{hero.name}}</div> 
       </div> 
      </li> 
     </ul> 
    </div> 

    export class SearchComponent { 
     heroes: Hero[] = []; 
     selectedHero: Hero; 

     constructor(private heroService: HeroService) { } 

     ngOnInit(): void { 
      this.heroService.getHeroes() 
      .then(heroes => this.heroes = heroes); 
     } 

     showDialog = false; 

     onSelect(hero: Hero): void { 
      this.selectedHero = hero; 
     } 

     onKeydown(): void { 
      console.log("onKeydown"); 
     } 
    } 

Answer 1

要素が重視されなければならず、そのためには、入力要素であるか>= "0"にtabindexセットを持っている必要があります。

は、あなたがグローバル(window:keydown)="onKeydown($event)"のようなキーボードイベントをキャプチャすることができますが、これはあなたのケースで役立ちます場合、私は知らないもCapture key press (or keydown) event on DIV element

を参照してください。

Answer 2

基本的にイベントタイプで始まり、一連のドット区切り修飾子を追加します。例：

最初に、制限事項があります。ネイティブのKeyEventsPluginプラグインはキー入力ではなく、 keydownイベントとkeyupイベントのみをサポートします。また、これらのキーの組み合わせ は、特定の要素（またはホスト）にのみバインドできます。プラグインは、グローバルな "document："または "window："イベントスコープをサポートするようには表示されません（ ）。 ブラウザオーバーライドの暗黙のサポートもありません。つまり、 キーコンビネーションのデフォルト動作をキャンセルする必要がある場合は、 （$ event.preventDefault（）を使用して）自分で行う必要があります。

keydown.a 
keydown.b 
keydown.c 
keydown.dot 
keydown.Spacebar 
keydown.meta.Enter 
keydown.alt.Enter 
keydown.control.Enter 
keydown.shift.Enter 
keydown.meta.o 
keydown.meta.s 
keydown.meta.f 
keydown.escape 

"特殊キー" 修飾子は、以下のとおりです。

ALT 制御 メタ - MacのコマンドキーとWindowsのWindowsキー。 シフト そこには2つの置換キーがあり、破損から構文を維持するだけです。

スペース - または「スペースバー」を使用できます。 ドット - 修飾子はドットで区切られているためです。

<input 
    (keydown.Enter)="handleKeyEvent($event, 'Enter')" 
    (keydown.alt.Enter)="handleKeyEvent($event, 'ALT + Enter')"         (keydown.control.Enter)="handleKeyEvent($event, 'Control + Enter')" 
    (keydown.meta.Enter)="handleKeyEvent($event, 'Meta + Enter')" 
    (keydown.shift.Enter)="handleKeyEvent($event, 'Shift + Enter')" 
    (keydown.Escape)="handleKeyEvent($event, 'Escape')" 
    (keydown.ArrowLeft)="handleKeyEvent($event, 'Arrow Left')" 
    (keydown.ArrowUp)="handleKeyEvent($event, 'Arrow Up')" 
    (keydown.ArrowRight)="handleKeyEvent($event, 'Arrow Right')" 
    (keydown.ArrowDown)="handleKeyEvent($event, 'Arrow Down')" 
autofocus>