角度为 2 的动态下拉搜索指令答案

【问题标题】：Dynamic dropdown search directive with angular 2角度为 2 的动态下拉搜索指令
【发布时间】：2017-11-06 09:25:46
【问题描述】：

我正在尝试实现类似this 的东西。我不想要它的多选部分。只是一个带有搜索框的下拉菜单，并且根据我在搜索框中输入的数据，它必须在下拉列表中过滤我的选项。我已经使用 angular 1 实现了相同的功能，但使用 angular 2 我真的很困惑。

【问题讨论】：

标签： angular angular2-template angular2-directives

【解决方案1】：

关于这个主题有很多东西。无论如何，有两种方法可以做到：

1。自定义指令

import { Directive, HostBinding, HostListener } from '@angular/core';

@Directive({
  selector: '[appDropdown]'
})
export class DropdownDirective {
  @HostBinding('class.menu-open') isOpen = false;

  @HostListener('click') toggleOpen() {
    this.isOpen = !this.isOpen;
  }
}

以及相应的css类：

.menu-open > .dropdown-menu {
  visibility: visible !important;
  display: block !important;
}

2。 NgxBootstrap

安装ngx-bootstrap和bootstrap

npm install ngx-bootstrap bootstrap --save

打开src/app/app.module.ts并添加

import { BsDropdownModule} from 'ngx-bootstrap';
...
@NgModule({
   ...
   imports: [BsDropdownModule.forRoot(), ... ],
    ... 
})``

打开 .angular-cli.json 并在样式数组中插入一个新条目

  ``"styles": [
     "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "styles.css",
  ],``

在你的组件中

``<div class="btn-group" dropdown>
  <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
    Button dropdown <span class="caret"></span>
  </button>
  <ul *dropdownMenu class="dropdown-menu" role="menu">
    <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
    <li class="divider dropdown-divider"></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
    </li>
  </ul>
</div>``

来源：https://valor-software.com/ngx-bootstrap/#/dropdowns

【讨论】：

在您的源页面上，它并没有说它启用了搜索。是吗？