简介
@rubicon9/ng2-select 是一个 Angular 2+ 的下拉选择框组件库，它可以用于自由地实现可搜索和可多选的下拉选择框。本文将为您详细介绍如何使用该组件库。
安装
npm install @rubicon9/ng2-select --save
引入
要使用该组件库，需要在 AppModule 中引入并导出 NgSelectModule 模块：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ----------- - ---- ----------------- ------ - -------------- - ---- ----------------------- ------ - ------------ - ---- ------------------ ----------- -------- - -------------- ------------ -------------- -- ------------- - ------------ -- ---------- - ------------ - -- ------ ----- --------- - -
使用
组件库包括 ng-select 组件和 ng-dropdown-panel 组件。
基本使用
只需在视图中加入 <ng-select> 标签，然后绑定 ngModel 和 items 属性即可实现基本的单选下拉选择框。
<ng-select [ngModel]="selectedItem" [items]="items"></ng-select>
多选和搜索
要开启多选和搜索功能，需在视图中对 ng-select 标签增加 multiple 和 search 属性，然后绑定 ngModel 和 items 属性。
<ng-select [ngModel]="selectedItems" [items]="items" [multiple]="true" [search]="true"></ng-select>
过滤
要过滤下拉选择框中的选项，可以使用 filter 属性：
<ng-select [ngModel]="selectedItem" [items]="items" [filter]="true"></ng-select>
自定义显示的文本
要显示自定义的文本，可以在 ng-select 标签中增加 bindValue 和 bindLabel 属性，通过这两个属性，我们可以把 items 数组中的某个属性绑定到 ng-select 上，以实现自定义显示的文本：
<ng-select [ngModel]="selectedItem" [items]="items" [bindValue]="'id'" [bindLabel]="'name'"></ng-select>
自定义选择框
使用 ng-template 标签可以实现自定义选择框。首先在 ng-select 标签中新增 dropdownTemplate 属性，然后在组件中用 ng-template 标签重新定义下拉选择框：
<ng-select [ngModel]="selectedItem" [items]="items" [dropdownTemplate]="customTemplate">
<ng-template #customTemplate let-item="item">
<!-- 自定义下拉选择框 -->
</ng-template>
</ng-select>自定义选择框面板
使用 ng-template 标签可以实现自定义选择框面板。首先在 ng-select 标签中新增 optionTemplate 属性，然后在组件中用 ng-template 标签重新定义下拉选择框面板：
<ng-select [ngModel]="selectedItem" [items]="items" [optionTemplate]="customOptionTemplate">
<ng-template #customOptionTemplate let-item="item">
<!-- 自定义选择框面板 -->
</ng-template>
</ng-select>示例代码
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
--------- ------------
---------- ------------------------ ----------------------------
------------ ------ ------------
---------- ------------------------- --------------- ----------------- ----------------------------
---------- ------------
---------- ------------------------ --------------- ----------------------------
---------- -------- ------------
---------- ------------------------ --------------- ------------------ ---------------------------------
---------- -------- ------------
---------- ------------------------ --------------- ------------------------------------
------------ --------------- ----------------
---- -------- ---
--------------
------------
---------- ------ -------- ------------
---------- ------------------------ --------------- ----------------------------------------
------------ --------------------- ----------------
---- -------- ---
--------------
------------
-
--
------ ----- ------------ -
------------- --- - ------
-------------- ----- - ------- ---------
------ ----- - -
- --- ------ ----- ----- --
- --- ------ ----- ----- --
- --- -------- ----- ------- --
- --- ------- ----- ------ --
- --- ------- ----- ------ -
--
-总结
@rubicon9/ng2-select 组件库是一个功能齐全的下拉选择框组件库，它支持单选、多选、搜索、过滤以及各种自定义功能，您可以按照上述步骤使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cad81e8991b448da127
