使用Angular 2使用鼠标点击或键盘选项卡的触发函数

Question

我在我的项目中使用Angular 2，我需要通过鼠标点击或标签来触发一个函数。目前，我能够使用鼠标单击触发removeFilterMsg功能，但不是通过选项卡。下面是代码:

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

是否有任何方法可以通过鼠标点击或标签来触发此功能?我试图改变从(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);
}