npm 包 ngx-tag-input 使用教程-JavaScript中文网-JavaScript教程资源分享门户

npm 包 ngx-tag-input 使用教程

前言

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