Как имитировать наведение с событиями клавиатуры

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:

.selected { 
    background-color: red; 
}