在 Angular 2/4 中实现自定义下拉菜单答案

【问题标题】：Implementing Custom dropdown in Angular 2/4在 Angular 2/4 中实现自定义下拉菜单
【发布时间】：2019-01-05 09:46:58
【问题描述】：

我一直在研究自定义下拉功能，它使用水平分隔线分隔两组值，并具有一般的选择下拉功能，例如使用 up 和 down 箭头导航值，以及转到 alphabet 的 press 上的特定值。

代码：

<div class="btn-group d-flex dropdown" dropdown>
<div class="floatLabelContainer w-100">
<button id="button-basic" dropdownToggle type="button" float-label [addLabel]="false" [hasFloat]="true" class="mb-2" aria-controls="dropdown-basic">
{{selectedCountry}}
<span class="caret" id="country-caret"></span>
</button>
<label for="button-basic" class="label-class" id="label-class">Country</label>
</div>
<ul id="dropdown-basic" slimScroll width="100%" height="250px" size="3px" alwaysVisible="true" wheelStep="20" *dropdownMenu
class="dropdown-menu d-block" role="menu" aria-labelledby="button-basic">
<li role="menuitem">
<a class="dropdown-item" tabindex="0" (click)="selectedCountry = country.name" *ngFor="let country of restOfCountries | orderBy : 'name'">{{country.name}}</a>
</li>
<li class="divider dropdown-divider"></li>
<li role="menuitem">
<a class="dropdown-item" tabindex="0" (click)="selectedCountry = country.name" *ngFor="let country of asianCountries | orderBy : 'name'">{{country.name}}</a>
</li>
</ul>
</div>

我已经可以用上面的代码实现分频器部分了，

但是否也可以实现箭头和字母按功能。

我更喜欢有角度特定的实现或插件，而不是 js 或 jQuery

【问题讨论】：

您可以使用点击事件来点击箭头。现在有什么问题？
如果开放使用插件库这将是最好的primefaces.org/primeng/#/dropdown
这与箭头上的点击事件无关@Chellappan
你的意思是嵌套下拉菜单？
这是一个基本的实现。我刚刚把它放在一起，所以可能会有一些错误，但它应该让你很好地了解从哪里开始。 stackblitz.com/edit/…

标签： html angular dropdown angular2-directives

【解决方案1】：

有可能评估keydown 和keyup 事件：

https://alligator.io/angular/binding-keyup-keydown-events/

据此，您应该能够通过实现点击侦听器来实现此功能，例如：

<div class="btn-group d-flex dropdown"
     (keydown.arrowup)="select(items[i-1])"
     (keydown.arrowdown)="select(items[i+1])"
     dropdown>

编辑：所以我尝试了这个，结果这在默认情况下不适用于任何项目。它适用于输入，示例如何显示，但我现在无法让 i ti 处理列表。

【讨论】：