Question

我目前正在研究一些共享代码，这些共享代码需要无法使用鼠标导航的用户访问。很多元素的click事件都绑定到了处理程序。

<div ngFor="let user of users">
    <div class="link" (click)="addOrEditUser(user.Id)">{{ user.Name }}</div>
</div>

因为此元素需要同时支持click和keypress事件，所以我定义了以下指令，以帮助我仅在用户按下“ Enter”键时触发单击处理程序。

import { Directive, ElementRef, OnDestroy, HostListener, HostBinding, Output, EventEmitter, OnInit } from '@angular/core';

@Directive({
    selector: '[keyboardClick]',
})
export class KeyboardClickDirective implements OnDestroy, OnInit {
    eventListenerRef: any;
    @HostBinding('attr.tabindex') tabIndexValue: number;

    @Output('click')
    emmiter = new EventEmitter();

    constructor(private elementRef: ElementRef) {
        console.log('this should have a click event', elementRef);
    }

    ngOnInit(): void {
        if (!this.tabIndexValue) this.tabIndexValue = 0;
    }

    @HostListener('keydown', ['$event'])
    enterPressed(e: KeyboardEvent) {
        if (e.key === 'Enter') {
            this.emmiter.emit(e);
        }
    }

    ngOnDestroy(): void {}
}

我必须这样做，因为我无法重构click事件的所有单个处理程序来支持按键。

现在我的模板看起来像这样：

<div ngFor="let user of users">
    <div class="link" (click)="addOrEditUser(user.Id)" keyboardClick>{{ user.Name }}</div>
</div>

我的代码可以满足我的需要，但是如果元素没有单击绑定，我想抛出一个错误。

TL; DR
这应该引发错误：

<div ngFor="let user of users">
    <div class="link" keyboardClick>{{ user.Name }}</div>
</div>

这不应引发错误：

<div ngFor="let user of users">
    <div class="link" (click)="addOrEditUser(user.Id)" keyboardClick>{{ user.Name }}</div>
</div>

Answer 1

我认为您只需要捕获键盘单击事件即可。

<div ngFor="let user of users">
    <div class="link" (keyboardClick)="addOrEditUser($event)">{{ user.Name }}</div>
</div>

如何通过属性指令验证事件（点击）绑定？

1 个答案: