angular - 如何在angular2中为左右键添加事件？

Question

我已经编写了如下所述的代码。截至目前，列表项仅在单击鼠标时被选中。即使我按下键盘上的上下箭头，我也想遍历列表。如何使用 angular2 实现这一点？

import { Component } from '@angular/core';

export class Hero {
name: string;
}

const HEROES: Hero[] = [
{ name: 'STWX1' },
{ name: 'STWX2' },
{ name: 'STWX3' },
{ name: 'STWX4' }
];

@Component({
selector: 'my-app',
template: `
    <div style="display: inline-block; width = 200px; ">
        <ul class="heroes">
            <li *ngFor="let hero of heroes" (click)="onSelect(hero)"
                [class.selected]="hero === selectedHero">
                 <p>{{hero.name}}</p>
            </li>
       </ul>
   </div>'

, 风格:[...]})

export class AppComponent  {
name = 'Angular1';
testRequestId = '3224';
heroes = HEROES;
selectedHero: Hero;

goToDivClick() {
    return HEROES;
}

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

Answer 1

<li *ngFor="let hero of heroes;let index=index" 
  [style.background-color]="index === selectedIndex ? 'yellow' : null"
  (click)="onSelect(hero)" 
  (keydown.ArrowLeft)="onLeft($event)" (keydown.ArrowRight)="onRight($event)"
  (keydown.ArrowUp)="onUp($event)" (keydown.ArrowDown)="onDown($event)"

另见 https://github.com/angular/angular/blob/630d93150a58581a0d474ebf1befb5d09b6813c5/modules/angular2/src/platform/browser/browser_adapter.dart