在前端开发的过程中，我们经常需要使用到下拉框选择多个选项的功能。而 angular2-dropdown-multiselect 这个 npm 包可以很好地实现这个功能。
安装
首先，在项目中安装 angular2-dropdown-multiselect，可以使用 npm 命令安装：
npm install angular2-dropdown-multiselect --save
然后，在 app.module.ts 文件中引入 AngularMultiSelectModule 模块：
-- -------------------- ---- -------
------ - ------------------------ - ---- --------------------------------
-----------
-- ---
-------- -
-- ---
------------------------
--
-- ---
--引入模块后，就可以在组件中使用 angular2-dropdown-multiselect 了。
使用
使用 angular2-dropdown-multiselect 的最简单方式是在模板中使用。
<angular2-multiselect [data]="myOptions" [(ngModel)]="optionsModel"></angular2-multiselect>
其中，myOptions 是一个下拉框选项列表，optionsModel 是绑定的选项数据。在组件中需要定义这两个属性并初始化。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
--------------------- ------------------ --------------------------------------------------
-
--
------ ----- ------------ -
---------- ---------- - -
---- -- ----- ------ ---------
---- -- ----- ------- ---------
---- -- ----- ------ ---------
-- ---
--
------------- ---------
-在组件中初始化 myOptions 和 optionsModel 后，就可以在模型中使用 angular2-multiselect 了。
配置选项
angular2-dropdown-multiselect 还支持一些选项配置，例如限制最大选项数、禁用选项等。
<angular2-multiselect [data]="myOptions" [settings]="mySettings" [(ngModel)]="optionsModel"></angular2-multiselect>
在 settings 属性中定义选项配置。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------------- - ---- --------------------------------
------------
--------- -----------
--------- -
--------------------- ------------------ ----------------------- --------------------------------------------------
-
--
------ ----- ------------ -
---------- ---------- - -
---- -- ----- ------ ---------
---- -- ----- ------- ---------
---- -- ----- ------ ---------
-- ---
--
------------- ---------
----------- -------------------- - -
--------------- --
--------- ------
-- ---
--
-在这个例子中，我们配置了选项最大选项数为 2 个，并没有禁用选项。更多的配置选项可以参考 angular2-dropdown-multiselect 的官方文档。
总结
angular2-dropdown-multiselect 是一个非常实用的 npm 包，可以方便地实现下拉框选择多个选项的功能。在使用 angular2-dropdown-multiselect 的过程中，我们需要注意安装和引入模块等步骤，同时也需要配置选项以满足需求。更多的详细内容可以参考 angular2-dropdown-multiselect 的官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005590981e8991b448d670b