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