如何绑定到 Angular2 中 li 标签的 keydown 事件？

Question

使用(click)="onSelect(hero)，我可以绑定到li标签的点击事件。我也可以绑定到标签mouseover事件li。但我无法绑定到标签keydown事件li。 li标签支持click,mouseover,keydown属性，所以我想我可以使用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

您基本上从事件类型开始，然后添加一系列以点分隔的修饰符。例如：

第一，局限性。原生 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

“特殊键”修饰符是：

alt control meta - Mac 上的 Command 键和 Windows 上的 Windows 键。shift 然后有两个替换键可以防止语法中断：

空格 - 或者，您可以使用“空格键”。点 - 因为修饰符是点分隔的。

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