Как связать событие keydown с тегом li в Angular2?

Question

используя (click)="onSelect(hero), я могу привязать событие click от li тегов. Я также могу связать с mouseover событие li тег. Но я не могу связать с keydown событие li тег. li тег поддерживает click,mouseover,keydown propety, поэтому я думаю, что могу использовать событие 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

Элемент должен быть сосредоточен и на том, что он должен быть входной элемент или иметь tabindex набор для >= "0".

Смотрите также Capture key press (or keydown) event on DIV element

Вы можете захватывать события клавиатуры во всем мире как (window:keydown)="onKeydown($event)", но я не знаю, если это поможет в вашем случае.

Answer 2

В основном вы начинаете с типа события, а затем добавляете ряд модификаторов с разделителями с точечной разметкой. Например:

Во-первых, ограничения. Нативный плагин KeyEventsPlugin поддерживает только события keydown и keyup, а не keypress. И эти комбинации клавиш могут быть привязаны только к определенному элементу (или хосту) - плагин не , по-видимому, поддерживает глобальную область событий «документ:» или «окно:». Существует также неявная поддержка браузеров-переопределений. Смысл, если вам нужно отменить по умолчанию комбинацию клавиш, вам необходимо выполнить (с помощью $ 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 

"Специальный ключ" модификаторы:

альт управления мета - ключ Command на Mac и ключ для Windows на Windows. shift Есть два ключа замены, которые только удерживают синтаксис от взлома:

Пространство - Или вы можете использовать «Пробел». Dot - Поскольку модификаторы разделены точками.

<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>