在前端开发中，我们经常需要使用下拉框来展示数据，Angular 框架中提供了 ng-select 来实现下拉框，但是在一些特殊情况下，我们需要一些定制化的功能，此时可以使用 bm-ng2-select 这个 npm 包。
安装
安装 bm-ng2-select，可以使用 npm 安装命令：
npm install bm-ng2-select --save
引入
在使用 bm-ng2-select 之前，需要在模块中引入 bm-ng2-select：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ----------------- - ---- ----------------
-----------
-------- -
------------------
-- ----- -------
--
-- ----- ------------
--
------ ----- -------- - -使用
bm-ng2-select 的使用和 ng-select 非常相似，下面以一个简单的例子来介绍其用法。
HTML 模板：
<bm-ng2-select [items]="items" [(ngModel)]="selectedItem" placeholder="Select an item"></bm-ng2-select>
组件：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- ---------------
--------- ----- ------------- -------- ----
--
------ ----- ----------- -
----- - -
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- -
--
------------ - -----
-在上面的例子中，我们传入了一个 items 数组和一个 selectedItem，bm-ng2-select 会根据 items 数组渲染下拉框，当用户选择一个选项时，selectedItem 会被赋值为所选的选项。
高级用法
输入和输出
bm-ng2-select 提供了一些属性和事件，可以通过它们实现更高级的功能。
属性
items: 必需，下拉框的选项数组。disabled: 可选，是否禁用下拉框，默认为 false。highlightColor: 可选，选项选中时的背景色，默认为 #0074D9。itemTextKey: 可选，下拉框的选项对象中，用于展示的属性，默认为 'name'。multiple: 可选，是否支持多选，默认为 false。noResultsFoundLabel: 可选，在下拉框中无匹配项时展示的文本，默认为 'No items found.'。placeholder: 可选，下拉框的占位符文本，默认为 'Select an item'。
事件
onChanges: 选中的选项改变时触发的事件，返回新的选中的选项。onClear: 下拉框被清空时触发的事件。onOpen: 下拉框被展开时触发的事件。onClose: 下拉框被关闭时触发的事件。
自定义选项
bm-ng2-select 也支持自定义选项的展示，可以使用 ng-template 标签来实现。
HTML 模板：
<bm-ng2-select [items]="items">
<ng-template let-item="item">
<img src="{{ item.avatar }}" class="avatar">
{{ item.name }}
</ng-template>
</bm-ng2-select>在上面的例子中，我们使用 ng-template 来自定义每个选项的展示，展示内容包括头像和名称。
组件：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- ---------------
--------- ----- ------------- -------- ----
--
------ ----- ----------- -
----- - -
- --- -- ----- ----- --- ------- ------------- --
- --- -- ----- ----- --- ------- ------------- --
- --- -- ----- ----- --- ------- ------------- --
- --- -- ----- ----- --- ------- ------------- --
- --- -- ----- ----- --- ------- ------------- -
--
-在组件中，我们传入了一个 items 数组，数组中包含了每个选项的 id、name 和 avatar 属性，选项的展示内容通过 ng-template 标签来定义。
结语
本文介绍了 npm 包 bm-ng2-select 的安装、引入和使用，包括基础用法和高级用法。通过使用 bm-ng2-select，我们可以方便地定制化下拉框的展示，提高用户体验。希望本文能对大家学习和使用 bm-ng2-select 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fea81e8991b448dd970