在前端开发中，我们经常需要实现一些带有选择标签的输入框，@jaspero/ng-chips 是一个非常方便的 npm 包，它提供了一种快速简便的方式实现这样的输入框。
本文将带领大家深入了解 @jaspero/ng-chips 以及它的使用方法，旨在为前端开发者提供更好的指导和帮助。
简介
@jaspero/ng-chips 是基于 Angular 的一款组件库，它提供了一种快速简便的方式实现带有选择标签的输入框功能，支持多种类型的输入和输出。
安装
我们可以通过 npm 安装 @jaspero/ng-chips
npm install @jaspero/ng-chips --save
使用
在使用之前我们需要将 @jaspero/ng-chips 添加至 NgModule 中，然后就可以在模板中使用它了。
-- -------------------- ---- -------
------ - ------------- - ---- --------------------
-----------
------------- -
------------
--
-------- -
--------------
-------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -示例
下面我们使用一个示例来演示如何使用 @jaspero/ng-chips。
首先，在模板中添加 ngc-input 控件，并设置它的配置参数。
<ngc-input fxFlex
formControlName="tags"
autofocus
[config]="{
addOnBlur: true,
separatorKeyCodes: [13, 32]
}">
</ngc-input>在组件中，我们需要定义一个 FormControl 来保存用户输入的标签。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---------- ------------ ----------- - ---- -----------------
------------
--------- -----------
--------- -
----- -------------------
---------- ------ -----------------------------------
-------
-
--
------ ----- ------------ ---------- ------ -
----- ----------
------------------- --- ------------ --
----------- ---- -
--------- - ---------------
----- --- ---------------
---
-
-这样，我们就创建了一个基础的带有选择标签的输入框。
关于 @jaspero/ng-chips 的更多用法，您可以参考它的官方文档。
总结
@jaspero/ng-chips 是一个简便易用的 npm 包，它为前端开发人员提供了一种快速实现带有选择标签输入框功能的方法。本文介绍了它的安装和使用方法，并提供了一个简单的示例。希望这篇文章对您有所帮助，也欢迎您在评论区留言分享您的想法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc5967216659e24438c