使用 Angular 2 通过鼠标单击或键盘选项卡触发功能

Question

我在我的项目中使用 Angular 2，我需要通过鼠标点击或 Tab 来触发一个函数。目前我可以使用鼠标点击触发 removeFilterMsg 功能，但不能通过 Tab 键触发。这是代码：

<button _ngcontent-tvl-14="" class="c-refine-item" name="refine" role="option" aria-selected="true" title="Remove Filter">
      <span class="facet" style="color:white;font-size:20px;cursor:pointer;" aria-hidden="true" (click)="removeFilterMsg()"> </span>
</button>

对于 .ts 函数：

removeFilterMsg() {
        const $message = document.createElement('span');
        $message.classList.add('RemoveFilterItem');
        $message.setAttribute('aria-live', 'assertive');
        $message.setAttribute('display', 'none');
        window.setTimeout(() => {
            $message.innerHTML = "Filter item is removed";
        }, 100);
        document.body.appendChild($message);
    }

有没有什么方法可以通过鼠标点击或Tab键来触发这个功能？我尝试将 (click) 更改为 (select) 但它不起作用

Answer 1

您需要使用 @HostListener 装饰器。您可以将其添加到当前功能之上。如果按下 Tab 键，它将触发该功能。

@HostListener('keydown.tab', ['$event'])
removeFilterMsg() {
    const $message = document.createElement('span');
    $message.classList.add('RemoveFilterItem');
    $message.setAttribute('aria-live', 'assertive');
    $message.setAttribute('display', 'none');
    window.setTimeout(() => {
        $message.innerHTML = "Filter item is removed";
    }, 100);
    document.body.appendChild($message);
}

使用 Angular 2 通过鼠标单击或键盘选项卡触发功能

Trigger Function with Mouse Click or Keyboard Tab using Angular 2

event-handling

typescript

angular