在前端开发中，经常需要处理用户输入的数据，例如搜索关键字、标签等等。为了方便管理和处理这样的数据，可以使用 npm 包 qs-ngchips。这个包可以将用户输入的一段文本转换成一组标签（chips），方便程序员进一步处理。
安装
使用 npm 安装 qs-ngchips：
npm install qs-ngchips
引入 qs-ngchips：
-- -------------------- ---- -------
------ - ----------- - ---- -------------
-----------
-------- -
------------
---
--
---
--
------ ----- -------- --使用
显示标签列表
在 HTML 中使用 chips-list 标签，并传入一个数组对象：
<chips-list [data]="myTags"></chips-list>
示例：
myTags: string[] = ['tag1', 'tag2', 'tag3'];
处理用户输入
在 HTML 中使用 chips-input 标签，并监听 (chipAdded) 和 (chipRemoved) 事件。在事件处理方法中处理用户输入的数据。
<chips-input (chipAdded)="onChipAdded($event)" (chipRemoved)="onChipRemoved($event)"></chips-input>
示例：
onChipAdded(value: string) {
console.log('Added chip: ' + value);
}
onChipRemoved(value: string) {
console.log('Removed chip: ' + value);
}控制用户输入
可以在 chips-input 标签中传入一个正则表达式，控制用户输入的内容。
<chips-input [pattern]="myPattern"></chips-input>
示例：
myPattern = /^[a-zA-Z0-9_-]*$/; // 只允许输入字母、数字、下划线和连字符
自定义样式
可以重新定义样式表中的样式，以适应不同的样式需求。以下是可以自定义的样式类：
chips-list：标签列表容器chips-item：单个标签容器chips-cross：删除标签按钮
示例：
-- -------------------- ---- ------- ----------- - ------- --- ----- ----- - ----------- - ----------------- ----- - ------------ - ------ ---- -
指导意义
- qs-ngchips 可以帮助开发者快速处理用户输入的一组文本。
- 可以通过传入正则表达式来控制用户输入内容的格式。
- 样式可以根据具体需求进行定制。
示例代码
-- -------------------- ---- -------
----------- --------------- -----------------------------
------------ --------------------------------- ------------------------------------- --------------------- -------------------------------
-------
-------- -
------- --- ----- -----
-------- ----
-------- -------------
-
--------- -
----------- -----
-------- -------------
-
--------
--------
------ - ----------- - ---- -------------
------ ------- -
----- --------------
----------- -
-----------
--
------ -
------ -
------- -------- ------- --------
---------- ------------------
-
--
-------- -
------------------ -
------------------ ----- - - -------
--
-------------------- -
-------------------- ----- - - -------
-
-
-
---------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f87238a385564ab6d28