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

发布时间：2020-12-17 17:32:07 所属栏目：安全来源：网络整理

导读：使用(click)=“onSelect(hero),我可以绑定到li标签的click事件. 我也可以绑定到li标签的mouSEOver事件. 但是我无法绑定到li标签的keydown事件. li标签支持click,mouSEOver,keydown propety,所以我想我可以使用keydown事件(向下箭头)导航到此列表框中的下一个

使用(click)=“onSelect(hero),我可以绑定到li标签的click事件.
我也可以绑定到li标签的mouSEOver事件.
但是我无法绑定到li标签的keydown事件.
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");
        }
     }

解决方法

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

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键.
转移
然后有两个替换键,只是保持语法不破：

空间 – 或者,您可以使用“空格键”.
点 – 由于修饰符以点分隔.

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!