前端开发中使用多选下拉框是很常见的需求，但是手写可以非常麻烦。npm 包 @hosseiniahmad/angular2-multiselect-dropdown 库能够有效地解决这个问题。本文将介绍如何在 Angular2+ 项目中使用此库实现多选下拉框，并包含示例代码，帮助大家应用此技术。
安装
在使用 @hosseiniahmad/angular2-multiselect-dropdown 之前，需要先通过 npm 进行安装。
npm install @hosseiniahmad/angular2-multiselect-dropdown --save
同时，需要在项目中引入它：
import { AngularMultiSelectModule } from '@hosseiniahmad/angular2-multiselect-dropdown';在你的 NgModule 中进行注册，也可以通过以下方式进行全局引入：
@NgModule({
imports: [
AngularMultiSelectModule.forRoot(),
],
})基本用法
在组件的模板文件中，使用 angular-multiselect 组件即可实现多选下拉框。
-- -------------------- ---- ------- -------------------- ----------------- --------------------------- ----------------------------- --------------------------------- ------------------------------------- ----------------------------------- ---------------------------------------- ----------------------
数据绑定
组件中的 data 属性是一个数组，表示供下拉框选择的选项。同时，需要配置 ngModel 规定当前选择的值。在组件初始化时，可以将 dataList 和 selectedItems 设置为初始值。
-- -------------------- ---- ------- -------- - - ------ --------- ------- ---- ------ --------- ------- ---- ------ --------- ------- ---- ------ --------- ------- ---- ------ --------- ------- --- -- ------------- - - ------ --------- ------- ---- ------ --------- ------- ---- --
设置
在组件中，需要设置下拉框的样式、搜索功能、按钮功能等等。需要使用 settings 属性完成这些配置。
dropdownSettings = {
singleSelection: true,
idField: 'id',
textField: 'itemName',
selectAllText: 'Select All',
unSelectAllText: 'UnSelect All',
allowSearchFilter: true
};这里的 settings 大部分选项都是可选项，但是其中一些必须配置：
singleSelection: 是否支持单选模式，设置为false可以开启多选模式。idField: 数据项的 id 属性的名称。textField: 显示在下拉框中的文本属性的名称。
事件绑定
在组件中有以下 4 种事件对应着组件的 4 种交互行为：
onSelect: 当一个或多个选项被选中时触发。onDeSelect: 当一个或多个选项被取消选中时触发。onSelectAll: 当所有选项都被选中时触发。onDeSelectAll: 当所有选项都被取消选中时触发。
-- -------------------- ---- ------- ------------------ ---- - ------------------ - -------------------- ---- - ------------------ - ------------------ ---- - ------------------- - -------------------- ---- - ------------------- -
示例代码
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------------ - ---- -----------------------------------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
-------- - -
------ --------- ------- ----
------ --------- ------- ----
------ --------- ------- ----
------ --------- ------- ----
------ --------- ------- ---
--
------------- - -
------ --------- ------- ----
------ --------- ------- ----
--
---------------- - -
---------------- -----
-------- -----
---------- -----------
-------------- ------- -----
---------------- --------- -----
------------------ ----
--
------------------ ---- -
------------------
-
-------------------- ---- -
------------------
-
------------------ ---- -
-------------------
-
-------------------- ---- -
-------------------
-
--- -------------------- ---- ------- -------------------- ----------------- --------------------------- ----------------------------- --------------------------------- ------------------------------------- ----------------------------------- ---------------------------------------- ----------------------
总结
@hosseiniahmad/angular2-multiselect-dropdown 是一个使用简单、配置方便的多选下拉框库，适用于在 Angular2+ 项目中进行开发。使用此库可以有效地提高开发效率。通过本文的介绍，相信读者已经可以自如地使用此库进行多选下拉框的开发了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600571cc81e8991b448e839f