什么是 ng2-tag-input-padconf？
ng2-tag-input-padconf 是一个基于 Angular2 的标签选择组件，它允许用户在输入框中快速添加或删除标签，并且支持对标签进行编辑和验证。
安装
首先，你需要在你的项目中安装 ng2-tag-input-padconf，可以通过 npm 安装。
npm install ng2-tag-input-padconf --save
使用
将 ng2-tag-input-padconf 加入到你的 Angular2 模块中。
-- -------------------- ---- -------
------ - -------------- - ---- ------------------------
-----------
-------- -
-- ---
---------------
-- ---
-
--
------ ----- --------- - -在你的组件中使用 ng2-tag-input-padconf。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- ---------
--------- -----------
-------------------
------------------- ------
------------------------------ ------
--------------
-----------------------
--------------
--
------ ----- ------------ -
----- - ------------ ------------- ------- -------
-参数
ng2-tag-input-padconf 提供了一些可选参数来帮助你自定义标签选择器。
placeholder：输入框中的提示文本。secondaryPlaceholder：在输入框中没有值时显示的文本。maxItems：允许添加的最大标签数量。modelAsStrings：标签是否以字符串的形式显示，而不是自定义的对象。separatorKeys：标签输入框中用于分割标签的键。separatorKeyCodes：同上，但使用键码表示。addOnBlur：在失去焦点时是否将输入内容添加为标签。addOnPaste：是否允许使用粘贴添加多个标签。pasteSplitPattern：将多个标签从粘贴内容中分割的正则表达式。blinkIfDupe：如果一个已经存在的标签试图被添加，是否闪烁输入框。removable：是否允许用户删除标签。editable：是否允许用户编辑标签。allowDuplicates：是否允许添加重复的标签。readonly：标签选择器是否为只读状态。theme：标签选择器使用的 CSS 主题。
事件
ng2-tag-input-padconf 同样提供了一些事件来监听标签选择器的变化。
onTextChange($event)：文本变化时触发。onTagEdited($event)：编辑标签时触发。onTagRemoved($event)：移除标签时触发。onNewTag($event)：添加新标签时触发。onValidationError($event)：验证错误时触发。
示例代码
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- ---------
--------- -----------
-------------------
------------------- ------
------------------------------ ------
--------------
-----------------------
-----------------------------------
--------------
--
------ ----- ------------ -
----- - ------------ ------------- ------- -------
--------------- -
---------------- ------ --- ---- ----------
-
-结论
ng2-tag-input-padconf 是一个非常实用的 Angular2 组件，它能够帮助你快速构建一个标签选择器，在你的项目中节省大量时间和开发成本。希望这篇使用教程能够帮助你更好地应用 ng2-tag-input-padconf，在你的 Angular2 项目中创造出更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005571981e8991b448d4059