ng4-tag-input 是一个 Angular 4+ 的标签输入组件，它允许用户通过键入和选择创建在文本框内的标签。本文将向您展示如何在 Angular 应用程序中使用 ng4-tag-input 包。
安装 ng4-tag-input
在使用 ng4-tag-input 之前，您需要先安装它。使用以下命令安装：
npm install ng4-tag-input --save
引入模块
在使用 ng4-tag-input 之前，您需要在您的应用程序模块中引入 ng4-tag-input 模块。打开您的 app.module.ts 文件并添加以下代码：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ----------- - ---- ----------------- ------ - ----------------- - ---- ---------------- ------ - ------------ - ---- ------------------ ----------- -------- - -------------- ------------ ----------------- -- ------------- - ------------ -- ---------- - ------------ - -- ------ ----- --------- - -
在模板中使用 ng4-tag-input
现在，您已将 ng4-tag-input 模块导入您的应用程序，我们可以在应用程序中的任何组件中使用 ng4-tag-input 组件。
在您的组件的 HTML 文件中添加以下代码，以使用 ng4-tag-input 组件：
<ng4-tag-input [(ngModel)]="tags" [placeholder]="'Add a tag'" [secondaryPlaceholder]="'Hit Enter to add a new tag'"></ng4-tag-input>
组件输入属性
ng4-tag-input 提供了一些可用的输入属性：
placeholder- 标签输入框的占位符文本secondaryPlaceholder- 当用户按下回车键时在输入框中显示的文本maxTags- 允许添加的最大标签数。默认情况下不限制。allowDuplicates- 是否允许添加重复的标签addOnBlur- 是否在失去焦点时添加最后一个标签。默认为false。
组件输出属性
ng4-tag-input 提供了以下输出属性：
(onTagsChanged)- 每当标签更改时触发该事件。(onValidationError)- 当用户输入的标签不合法且无法创建新标签时触发。
示例代码
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
-------------- ------------------ ------------------- - ----- ---------------------------- ----- -- --- - --- ----------------------
---- ----------- --- -- ------
-- -------- --
------
--
------- --
--
------ ----- ------------ -
---- - -- ----- ------ -- - ----- ------ ---
-结论
到此为止，您已了解了如何使用 ng4-tag-input 包。该包是一个非常实用的组件，可以快速容易地帮助用户创建标签。您可以根据需要调整此组件的样式，并使用其提供的自定义属性和事件扩展它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671d81e8991b448e3810