在前端开发和 Angular2+ 框架中，我们经常需要使用一些选择器或者多选器组件来帮助用户选择和管理多个选项的情况，这时就需要用到一些开源的 npm 包来支持我们的开发工作。其中，ng2-mselect-tags 是一个非常方便实用的 Angular2+ 组件库，尤其适用于多选器的情况，本文将详细介绍它的使用教程和示例代码。
1. 安装和引入
在你的 Angular2+ 项目中，安装 ng2-mselect-tags 包可以使用 npm 命令行工具：
npm install ng2-mselect-tags --save
然后在你的组件中引入并声明使用：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- -----------------
------ - ------------------------ - ---- -------------------
------------
--------- ----------------
--------- -
----------------
---------------
---------------------
------------------------------
------------------
-
--
------ ----- ------------ -
----- - ----------- -------- ------ -------- ----------- -----------
------------- - --- --------------
-在这个例子中，我们引入了 ng2-mselect-tags 包和 Angular2+ 的 FormControl 和 Ng2MultiSelectTagsModule 组件，并在组件类中定义了一个数组 items 来存放所有可选项，并用 FormControl 类来定义了一个名为 selectedItems 的成员变量来动态管理用户选择的所有项。
2. 参数和属性
ng2-mselect-tags 提供了一些参数和属性配置选项，通过这些选项，我们可以修改组件的样式、占位文本、验证信息等，其中常用的选项包括：
items：定义允许选择的所有项数组；placeholder：定义选择器的占位文本；label：定义选择器的标签文本；tagClass：定义标签的样式类；separatorKeysCodes：定义输入多选标签的分隔符键值；showNextOnEmpty：定义是否在输入框为空时自动显示下拉选择菜单；noItemsFoundText：定义当没有匹配项时的提示信息；maxSelectableItems：定义最大可选项数；dropdownArrow：定义下拉菜单的导航箭头样式；showClearAll：定义是否显示“全部清除”的控件；isRequired：定义是否必填项；allowAddTag：定义是否允许手动添加标签；useCommaSeparator：定义是否用逗号分隔多选结果。
在实际开发中，我们可以根据实际需求，灵活配合使用这些选项，并按需调整样式和行为。
3. 事件和方法
ng2-mselect-tags 还提供了一些常用的事件和方法，用于和用户的选择和交互进行监听和管理，这些事件和方法包括：
(selectedItems)：当用户选择任意项时触发；(removedItem)：当用户移除任意项时触发；(onBlur)：当选择器失去焦点时触发；(onFocus)：当选择器获取焦点时触发；selectAll()：选择所有可选项；deselectAll()：清除所有选择项。
我们可以根据这些事件和方法，对用户的选择和交互进行更加细致和定制化的处理和控制。
4. 示例代码
下面是一个完整的 ng2-mselect-tags 的示例代码，你可以复制到本地，运行查看效果：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- -----------------
------ - ------------------------ - ---- -------------------
------------
--------- ----------------
--------- -
------
---- -------------------
------ ------------------------------------
----------------
---------------
---------------------
-----------------------------
-------------------
--------------------
--------------------------
-----------------------------------------
--------------------------------------
------------------
------
---------------
----
--- ----------- ---- -- ---------------------------
-----
-------
-
--
------ ----- ------------ -
----- - ----------- -------- ------ -------- ----------- -----------
------------- - --- --------------
------------- -------- - ---
---------------------- --------- -
----------------- - ------
-
------------------- ------- -
-- -- --------- ---- -- ---- -- -------
-
-在这个例子中，我们定义了一个 name 为“multiSelect”的表单组合和一个 ng2-mselect-tags 的选择器组件，我们可以动态添加和删除任意多选项，组合成一个自动保存的验证表单，并在控制台输出所有选择的结果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b7d81e8991b448d906d