angular 2 的动态下拉搜索指令

Question

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

Answer 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 class :

.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

angular 2 的动态下拉搜索指令

Dynamic dropdown search directive with angular 2

angular2-directives

angular2-template

angular

1。自定义指令

2。 NgxBootstrap