キーボードイベントでホバーをシミュレートする方法

Question

リストアイテムがドロップダウンリストに動的に追加される次のHTMLテンプレートがあります。

<button class="btn btn-default btn-sm dropdown" (keydown)="triggerTraverse($event)"></button> 
    <fa-list-filler> 
     <li *ngFor="let item of items [class.active]="checkItem(item,selectedItem)"> 
      <span (click)="doNavigate()" class="cookie"></span> 
     </li> 
    </fa-list-filler> 

私は、リスト項目の次ホバースタイルを持っている：

li > .cookie { 
     cursor: pointer; 
     &:hover{ 
      background-color: 'yellow'; 
     } 
    } 

私は私のマウスでこれらのリスト項目を置くと、私は私ができる、すなわちリスト項目に適用されるホバースタイルを見ることができますこの場合、黄色の背景色を参照してください。

デフォルトでは、最初の項目が選択されています。つまり、クラスがアクティブです。次に、ユーザーが下矢印キーを押すと、アクティブなクラスは同じ場所にとどまりますが、ホバー状態は次のリスト項目に移動し、次の項目に移動し、折り返さなければなりません。

次のメソッドを実装しましたが、それ以降の要素で正しく処理することができません。

triggerTraverse(evt: KeyboardEvent){ 
    if(evt.keyCode === 27){ 
    closeDropdown(); 
}else if(evt.keyCode === 40){ 
    let initialEle = document.querySelector('li.active'); 
initialEle.nextElementSibling.firstElementChild.classList.add('hoverstyle'); 
} 
} 

hoverstyleは、要素に背景色を追加するために実装したばかりの別のクラスです。

.hoverstyle{ 
background-color: 'pink'; 
} 

誰でも助けてください。

Answer 1

選択したインデックスを追跡し、ngClassディレクティブを使用します。例えば

：

テンプレート：

<input ... (keydown)="onKeydown($event)"> 
<div *ngFor="let option of options; let i = index;" 
    (mouseover)="highlight(i)" 
    [ngClass]="{'selected': i === selectedIndex}"> 
    <span>{{ option }}</span> 
</div> 

コンポーネント：

selectedIndex = 0 

... 

highlight(i: number) { 
    this.selectedIndex = i; 
} 

onKeydown(event: KeyboardEvent) { 
    if (event.code === 'ArrowUp' && this.selectedIndex > 0) { 
     event.preventDefault(); 
     this.selectedIndex--; 
    } else if (event.code === 'ArrowDown' && this.selectedIndex < (this.options.length - 1)) { 
     event.preventDefault(); 
     this.selectedIndex++; 
    } 
} 

CSS：あなたはクラス `hoverstyle`が`李に追加

.selected { 
    background-color: red; 
}