前言
随着移动端应用的普及，Web 前端越来越注重用户体验，而标签输入框是一个经常使用的组件。ionic2-tags-input 就是一个优秀的标签输入框组件，它基于 Ionic2 与 Angular2 编写，拥有良好的兼容性和可定制性，被广泛地应用于移动端 Web 应用的标签输入场景中。
安装
ionic2-tags-input 作为一个 NPM 包，可以非常方便地通过 npm 命令进行安装：
npm install ionic2-tags-input --save
完成安装后，在需要使用标签输入组件的模块中引入 ionic2-tags-input 的模块文件：
-- -------------------- ---- -------
------ ----------------------- ---- --------------------
-----------
-------- -
-----------------------------------
--------------------- -- --------
--
------------- -
--------
-
--
------ ----- -------------- --使用
基本用法
ionic2-tags-input 模块中的标签输入组件的使用非常简单，只需要在 HTML 文件中添加标签输入框的标签即可：
<ion-item> <ion-label>Tags</ion-label> <ionic2-tags-input [(ngModel)]="tags"></ionic2-tags-input> </ion-item>
其中，属性 [(ngModel)] 是标签输入框的双向绑定，将其与指令类中的属性 tags 绑定，即可实现对标签的数据操作。
参数设置
ionic2-tags-input 提供了多个参数，可以对标签输入框进行个性化设置，如下是部分常用的参数：
type: string：输入框的类型，可选值为text和textarea，默认为text。canDeleteTags: boolean：是否可以删除标签，值为true或false，默认为true。focus: boolean：是否自动获取焦点，值为true或false，默认为false。
可以这样设置：
<ionic2-tags-input [(ngModel)]="tags" type="textarea" [canDeleteTags]="false" [focus]="true"></ionic2-tags-input>
样式定制
ionic2-tags-input 的样式使用了 Ionic2 的样式，可以通过覆盖样式类、CSS 选择器等方式进行个性化定制。
以修改标签的样式为例，可以设置样式如下：
-- -------------------- ---- ------- ----------------------- - ---------- ------- ----------------- ----- -------- ------- -------------- ------- - ---------------------- - ------------- ------- -------------- ------- ---------- ------- ----------------- -------- -------- ------- -------------- ------- -------------- ------- ------ ----- -
事件监听
ionic2-tags-input 支持多个事件监听，包括：标签添加 onTagAdd、标签删除 onTagDelete、标签编辑 onTagEdit、标签点击 onTagClick、输入变化 onInputChanged。
这些事件的参数类型均为 TagModel，表示标签的数据模型，包括标签的值、CSS 类名、标签输入的位置等属性。
方法如下：
-- -------------------- ---- ------- ------------- --------- - ---------------- --- --- -------------- - -------------- --------- - ----------------- --- ---- ----------- -- ------------------ - ------------------------ --------- - ---------------- ------------------- ---------- - --------------- --------- - ---------------- ----------- ---------- - --------------------- ------- ------- ------- ------------------ - ------------------------- -
综述
ionic2-tags-input 是轻量、可定制的 Web 前端标签输入组件，能够满足绝大部分标签输入场景的需求。在使用过程中，需要注意进行基本参数的设置、样式定制和事件监听等。希望通过本次的使用教程，能够对大家的开发工作有所帮助。
示例代码
完整的标签输入组件的示例代码如下：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------- - ---- --------------------
------------
--------- ------------
--------- -
----------
---------------------------
------------------ ------------------ --------------- ----------------------- --------------
-----------------------------
-----------------------------------
-------------------------------
---------------------------------
------------------------------------------
--------------------
-----------
-
--
------ ----- -------- -
----- ----------------
------------- -
--------- - -
------ ------------
------ ----------
------ -------------
--
-
------------- --------- -
---------------- --- --- --------------
-
-------------- --------- -
----------------- --- ---- ----------- -- ------------------
-
------------------------ --------- -
---------------- ------------------- ----------
-
--------------- --------- -
---------------- ----------- ----------
-
--------------------- ------- ------- ------- ------------------ -
-------------------------
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005554281e8991b448d277e