我在我的專案中使用了 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)但它不起作用
uj5u.com熱心網友回復：
您需要使用@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);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/340936.html
上一篇：將物件鍵映射到泛型類中的值型別