在前端开发中，我们经常需要实现 tag、token 等组件。而 npm 包 conlaoch-ngx-chips 就是一个方便快捷地实现这类组件的工具包。
安装
conlaoch-ngx-chips 可以通过 npm 进行安装，命令如下：
npm install conlaoch-ngx-chips
安装完成后，在项目中引入模块：
import { NgxChipModule } from 'conlaoch-ngx-chips';并将 NgxChipModule 注册到您的模块中：
-- -------------------- ---- -------
-----------
-------- -
-------------
--
------------- -
--------------
--
---------- ---------------
--
------ ----- ---------- - -用法
conlaoch-ngx-chips 提供了两种基本组件：ngx-chip 和 ngx-chips。
ngx-chip
ngx-chip 是一个简单的标签组件，可以用于展示一些带有标签的信息。使用时，需要在组件中传入 label 属性。
<ngx-chip label="Tag 1"></ngx-chip> <ngx-chip label="Tag 2"></ngx-chip> <ngx-chip label="Tag 3"></ngx-chip>
ngx-chips
ngx-chips 是一个多选组件。用户可以在其中添加、删除、选择多个标签。使用时，需要创建一个数据源，并将数据传入组件中。
<ngx-chips [data]="tags"></ngx-chips>
其中 tags 数据源定义如下：
tags = [
{ id: 1, name: 'Tag 1' },
{ id: 2, name: 'Tag 2' },
{ id: 3, name: 'Tag 3' },
{ id: 4, name: 'Tag 4' },
{ id: 5, name: 'Tag 5' },
];同时，也可以通过 maxLength 控制最大选择数量：
<ngx-chips [data]="tags" [maxLength]="2"></ngx-chips>
更多属性和方法可以参考官方文档。
示例代码
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
---- ----------------------
----------------------
--------- ---------- --------------
--------- ---------- --------------
--------- ---------- --------------
------
---- ------------------------
-----------------------
---------- ------------- ----------------------------
------
--
------- --
--------------- ---------------- -
-------------- -----
-
--------- -
----------------- -----
-------- ----
------------- ----
-------------- ----
------- --------
-
--------------- -
----------------- -----
-
--------- -
----------------- --------
------ -----
-
--
--
------ ----- ------------ -
---- - -
- --- -- ----- ---- -- --
- --- -- ----- ---- -- --
- --- -- ----- ---- -- --
- --- -- ----- ---- -- --
- --- -- ----- ---- -- --
--
-结语
conlaoch-ngx-chips 是一个便捷的前端标签组件包，可以帮助我们快速地实现多个 tag、token 等组件，并且集成简单，功能齐全，非常值得使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005663781e8991b448e22fc