Angular中如何为ngb-typeahead的dropdown-item父按钮添加类

默认情况下，ngb-highlight的父元素button.dropdown-item由NgbTypeahead组件自动生成，无法直接在自定义result模板中修改它的类，以下是两种可行方案：

方案一：利用itemClass输入属性动态绑定类 #

通过ngb-typeahead的itemClass输入属性，绑定一个根据结果返回类名的函数，实现动态添加类：

1. 在组件类中定义判断类名的方法：

getDropdownItemClass(result: any): string {
  return result.roleId === 6 ? 'disabled-user' : '';
}

2. 在模板的ngb-typeahead标签上绑定该方法：

<input type="text"
       [(ngModel)]="selectedUser"
       [ngbTypeahead]="searchUsers"
       [resultTemplate]="userTypeaheadTemplate"
       [itemClass]="getDropdownItemClass">

组件会自动为每个生成的button.dropdown-item添加对应类名。

方案二：自定义完整的item模板（完全控制父元素） #

如果需要更灵活的控制，可以直接自定义包含button.dropdown-item的完整item模板：

1. 修改自定义模板，将父元素button包含进来：

<ng-template #userTypeaheadItemTemplate let-r="result" let-t="term" let-active="active">
  <button class="dropdown-item" [ngClass]="r.roleId == 6 ? 'disabled-user' : ''" [class.active]="active">
    <ngb-highlight [result]="r.value" [term]="t"></ngb-highlight>
  </button>
</ng-template>

2. 在ngb-typeahead标签中使用[itemTemplate]替代[resultTemplate]：

<input type="text"
       [(ngModel)]="selectedUser"
       [ngbTypeahead]="searchUsers"
       [itemTemplate]="userTypeaheadItemTemplate">

这种方式可以完全控制button.dropdown-item的类名，同时保留[class.active]="active"以确保选中项的激活样式正常生效。

内容的提问来源于stack exchange，提问作者Onkar Meherwade