如何绑定到Angular2的li标签的keydown事件? [英] How to bind to keydown event of li tag in Angular2?

问题描述

使用(click)="onSelect(hero)，我可以绑定到li标签的click事件. 我还可以绑定到li标签的mouseover事件. 但是我无法绑定到li标签的keydown事件. li标签支持click,mouseover,keydown属性，所以我认为我可以使用keydown事件(向下箭头)导航到此列表框中的下一项.

using (click)="onSelect(hero), I can bind to click event of li tag. I can also bind to mouseover event of li tag. But I can't bind to keydown event of li tag. li tag supports click,mouseover,keydown propety, so I think I can use keydown event(down arrow) to navigate to the next item in this list box.

我可以在哪里找到官方文档?

Where is the official docs I can look for?

    <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");
        }
     }

推荐答案

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

You basically start with the event-type and then add a series of dot-delimited modifiers. For example:

首先，限制.本机KeyEventsPlugin插件仅支持 按键和按键事件，而不是按键事件.而且，这些组合键 只能绑定到特定元素(或主机)-插件不会 似乎支持全局的文档:"或窗口:"事件范围. 也没有对浏览器覆盖的隐式支持.意思是，如果 您需要取消组合键的默认行为， 必须自己完成(使用$ event.preventDefault()).

First, the limitations. The native KeyEventsPlugin plugin only support keydown and keyup events, not keypress. And, these key combinations can only be bound to a specific element (or host) - the plugin doesn't appear to support the global "document:" or "window:" event-scope. There is also no implicit support for browser-overrides. Meaning, if you need to cancel the default-behavior of the key-combination, you have to do it yourself (with $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 控制 meta-Mac上的Command键，Windows上的Windows键. 转移 然后有两个替换键，只是保持语法不被破坏:

alt control meta - The Command key on Mac and the Windows key on Windows. shift There are then two replacement keys that are there just keep the syntax from breaking:

空格键-或者，您可以使用空格键". 点-由于修饰符以点分隔.

Space - Or, you can use "Spacebar". Dot - Since the modifiers are dot-delimited.

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

这篇关于如何绑定到Angular2的li标签的keydown事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！