如何綁定Angular2中li標簽的keydown事件？

Question

使用(click)="onSelect(hero) ，我可以綁定到點擊事件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

您基本上從事件類型開始，然后添加一系列點分隔修飾符。 例如：

一，局限性。 本機KeyEventsPlugin插件僅支持keydown和keyup事件，而不支持keypress。 並且，這些鍵組合只能綁定到特定元素（或主機） - 該插件似乎不支持全局“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 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>

Answer 2

元素必須被聚焦，因此它需要是一個輸入元素或者tabindex設置為>= "0" 。

另請參閱DIV元素上的Capture按鍵（或keydown）事件

您可以全局捕獲鍵盤事件，如(window:keydown)="onKeydown($event)"但我不知道這對您的情況是否有幫助。