简介
ngx-multi-tagsinput 是一个 Angular 9+ 的 npm 包，它提供了一个多标签输入框，用户可以用它轻松地添加、编辑和删除多个标签。该组件是一个轻量、易用、可定制的 Angular 组件。
安装
安装 ngx-multi-tagsinput 只需要使用 npm 命令：
npm install ngx-multi-tagsinput --save
使用
在引入 ngx-multi-tagsinput 之前，请确保你的项目中已经包含了 Angular。你可以直接在模块中引用 ngx-multi-tagsinput，也可以将它作为独立模块引入。
将 ngx-multi-tagsinput 引入一个模块中
在你的模块的 imports 数组中引入 ngx-multi-tagsinput：
-- -------------------- ---- -------
------ - -------------------- - ---- ----------------------
-----------
-------- -
--------------------
--
-- ---
--
------ ----- ---------- --创建多标签输入框
在组件模板中创建多标签输入框：
<multi-tags-input [(ngModel)]="tags"></multi-tags-input>
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
----------------- --------------------------------------
-
--
------ ----- ------------- -
---- - --------- ---------- -------
-设置属性
多标签输入框支持很多可配置的属性，用来配置外观和行为。这些属性可以通过以下方式进行设置：
<multi-tags-input [(ngModel)]="tags" placeholder="Add a new tag" maxTags="5" addOnBlur="false" [separatorKeys]="[ENTER, COMMA]" [disable]="isDisabled" (tagsChanged)="onTagsChanged($event)"> </multi-tags-input>
在组件代码中，你需要定义这些属性：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------------- - ---- --------------------------
------ - ------ ----- - ---- ------------------------
------------
--------- -----------
--------- -
----------------- ------------------
---------------- - --- ----
-----------
-----------------
------------------------ -------
----------------------
--------------------------------------
-------------------
-
--
------ ----- ------------- -
---- - --------- ---------- -------
---------- - ------
-------- ------------------- -------- - ------- -------
------------------- ---------- ---- -
----------------- ---------- ------
-
-可配置的属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| placeholder | string | '' | 输入框的占位文本 |
| maxTags | number | null | 输入框可以包含的标签的最大数量 |
| addOnBlur | boolean | true | 指示是否在失去焦点时添加输入的标签 |
| separatorKeys | number[] | [ENTER] | 用于将文本分割成标签的键码数组 |
| disable | boolean | false | 指示是否禁用输入框 |
事件
| 事件名 | 参数 | 说明 |
|---|---|---|
| tagsChanged | string[] | 当标签集合改变时触发 |
定制化
多标签输入框可以通过以下方式进行定制：
使用 ng-content
我们可以使用 Angular 提供的 ng-content 指令，将组件的一部分内容放到组件的输入框的下方：
<multi-tags-input [(ngModel)]="tags"> <div>这是一个自定义内容</div> </multi-tags-input>
使用自定义模板
我们可以使用 Angular 自定义组件来定义多标签输入框的样式和行为。只需定义一个新的组件，并使用 ng-template 中的标记来定义输入框的内容。
-- -------------------- ---- -------
--------------------------- ------------------------------------------------
------------ -------------- --------------- --------------------------
----------------
-------------- ----------
--------- ----------- --- -- ----- --- ----- - ------ ------------------- ------------------ -----------------------------
-- --- --
--------- -------------------------------
-----------
----------------
------ -------- --------------------- ---------------------------- ----------------------------------------------------
--------------------------------- ----------------------------
-----------------
---------------- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------------- - ---- --------------------------
------ - ------ ----- - ---- ------------------------
------ - --------------------- ----------------- - ---- -----------------
------------
--------- -----------------------------
------------ ------------------------------------------
---------- -
-
-------- ------------------
------------ ------------------------------
------ ----
-
-
--
------ ----- ----------------------------- ---------- -------------------- -
------- - ---
----- -------- - ---
------- --------- ------ --------- -- -----
------- ---------- -- -- -----
------------- - -
---------------- ---------- ---- -
--------- - -----
-
-------------------- ------ --------- -- ------ ---- -
------------- - ---
-
--------------------- -- -- ------ ---- -
-------------- - ---
-
--------- ---- -
-- --------------- -
-------
-
-- ----------------------------------- -
-----------------------------
-------------------------
-
------------ - ---
-
---------------- -------- ---- -
----------------------- ---
-------------------------
-
-------- ------------------- -------- - ------- -------
-总结
在本篇文章中，我们介绍了如何使用 ngx-multi-tagsinput，包括安装、使用、设置属性、定制化等。希望这篇文章对于初学者来说能有所帮助。
示例代码
你可以在 Github 上找到完整的示例代码：https://github.com/ngx-multi-tagsinput/demo
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e19a563576b7b1ecb8b