Angular ngbDropdown：键盘导航不起作用

Question

我有一个由搜索栏和元素列表组成的模式，使用 ngbDropdown 创建，分为 2 个组件，父组件和子组件。 它工作正常，但我想不出一种方法来启用键盘导航（使用向上和向下键在列表的元素之间移动）。

按照官方文档，我尝试使用 ngbDropdownItem，但它不起作用。

这些是我的 2 个组件的模板：

1. 家长：

 <div ngbDropdown class="dropdown-no-arrow" (openChange)="openChange($event)" container="body"> <.-- trigger --> <ng-container> <button class="btn" ngbDropdownToggle *ngIf="authorizationService.loggedInUser"> <i class="fal fa-farm me-2"></i> <span>{{ authorizationService.loggedInUser.name }}</span> <i class="fal fa-chevron-down ms-2"></i> </button> </ng-container> <!-- menu --> <div ngbDropdownMenu aria-labelledby="currentMenuItem" id="currentDropdown_{{ id }}"> <button ngbDropdownItem (click)="openNewModal()"> <i class="fal fa-plus me-1"></i> <span i18n>New</span> </button> <dm-child-list [isListDisplayed]="isDropdownOpened"></dm-child-list> </div> </div>

2. 孩子：

 <div class="dropdown-header d-flex margin-x align-items-center"> <h6 class=" mb-0 flex-grow-1" i18n>MY LIST</h6> </div> <div class="px-4 py-2"> <div class="form-group mb-0"> <input class="form-control form-control-sm" libAutofocus [(ngModel)]="elSearch" (ngModelChange)="elSearch$.next($event)" i18n-placeholder placeholder="Search elements"> </div> </div> <button *ngFor="let el of list; let i = index;" ngbDropdownItem [ngClass]="{'top-border': i === 0}"> <i class="me-2 fas fa-check-circle text-success" *ngIf="selectedEl?.id === el.id" title="Current element"></i> <i class="me-2 fal fa-circle" *ngIf="selectedEl?.id.== el.id"></i> <span>{{ el.name }}</span> </button>

任何人都可以帮助进行键盘选择吗？

谢谢！

Answer 1

通过在使用ngbDropdown指令的div上添加#myDrop="ngbDropdown" (keyup)="myDrop.onKeyDown($event)" ，箭头键导航起作用。

在你的情况下，<div ngbDropdown #myDrop="ngbDropdown" (keyup)="myDrop.onKeyDown($event)" class="dropdown-no-arrow (openChange)="openChange($event)" container="body" >