前言
ngx-tag-input 是一个开源的基于 Angular 框架的 npm 包，它能快速帮助开发者实现标签输入的功能。标签输入功能在很多实际业务中都是非常必要且常见的，比如在博客系统中提交文章时，需要为文章设置若干个标签，而这种情况就可以使用 ngx-tag-input 来完成。
本文旨在帮助初学者了解 ngx-tag-input 的使用方法，同时通过示例代码演示功能的实现方式。
安装
在使用 ngx-tag-input 前，首先需要在项目中安装该依赖。
--- ------- ------------- ------
使用方法
以下是 ngx-tag-input 的使用方法：
导入 ngx-tag-input 模块
在使用 ngx-tag-input 前，需要先导入 ngx-tag-input 模块。
------ - -------------- - ---- ----------------
添加标签输入框
在 HTML 中添加标签输入框，通过 [(ngModel)] 双向数据绑定获取输入的标签。
---------- -------------------------------
添加标签删除事件
可以通过 (onRemove)="removeTag($event)" 来添加当标签被删除时的事件，其中 $event 是被删除的标签。
---------- ------------------ -------------------------------------------
添加标签添加事件
可以通过 (onAdd)="addTag($event)" 来添加当标签被添加时的事件，其中 $event 是被添加的标签。
---------- ------------------ -------------------------------------
更改标签分隔符
可以通过 [delimiters]="[9, 13]" 来更改标签分隔符（默认分隔符为逗号）。
---------- ------------------ ----------------- -----------------
示例代码
以下是一个简单的示例代码展示 ngx-tag-input 的使用方法：
------ - --------- - ---- ----------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
----- -------- - -------- ------ --------------
----------- -
--------------------
-
---------------------- -
--------- - -------------------- -- --- -- -------------
-
-在 HTML 中，只需添加以下标签即可使用 ngx-tag-input：
---------- ------------------ ------------------------ -------------------------------------------
总结
通过本文，我们了解了 ngx-tag-input 的基础使用方法，以及如何通过设置事件来实现更多定制化功能。接下来，我们可以根据实际需求来使用 ngx-tag-input，快速实现标签输入功能，提高我们的开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005732a81e8991b448e953f