在前端开发中，我们经常会使用到各种第三方组件和库来优化我们的代码和提供各种便利。今天，我们来介绍一个非常实用的 npm 包 @jaspero/ng2-chips，它可以帮助我们创建简单、美观的标签输入框。
安装
首先，我们需要安装 @jaspero/ng2-chips，可以通过以下命令完成：
npm install @jaspero/ng2-chips --save
使用
使用 @jaspero/ng2-chips 很简单，我们只需要按照以下步骤即可：
1. 导入 Ng2ChipsModule 模块
在你的 Angular 模块中导入 Ng2ChipsModule 模块：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------ - ---- ------------------ ------ - -------------- - ---- --------------------- ----------- -------- --------------- ---------------- ------------- --------------- ---------- -------------- -- ------ ----- --------- - -
2. 在 HTML 模板中使用 ng2-chips 组件
现在，我们可以在 HTML 模板中使用 ng2-chips 组件了。以下是一个简单的示例：
<ng2-chips [(ngModel)]="tags"></ng2-chips>
在上面的示例中，我们将一个字符串数组 tags 绑定到了 ng2-chips 组件的 ngModel 属性上，这样就可以实现标签输入框的功能了。
配置
我们可以通过配置来自定义 ng2-chips 组件的外观和行为。以下是一些常见的配置选项：
1. placeholder
通过设置 placeholder 属性，我们可以为标签输入框添加提示文字：
<ng2-chips [(ngModel)]="tags" [placeholder]="'请输入标签'"></ng2-chips>
2. input-name
通过设置 input-name 属性，我们可以设置标签输入框对应的表单名称：
<ng2-chips [(ngModel)]="tags" [input-name]="'tagsInput'"></ng2-chips>
3. readonly
如果我们想让标签输入框变成只读模式，可以设置 readonly 属性为 true：
<ng2-chips [(ngModel)]="tags" [readonly]="true"></ng2-chips>
4. disabled
如果我们想禁用标签输入框，可以设置 disabled 属性为 true：
<ng2-chips [(ngModel)]="tags" [disabled]="true"></ng2-chips>
5. max-items
通过设置 max-items 属性，我们可以限制标签输入框中标签的数量：
<ng2-chips [(ngModel)]="tags" [max-items]="5"></ng2-chips>
在上面的示例中，我们将标签数量限制为了 5 个。
6. validator
通过设置 validator 属性，我们可以自定义标签输入框的验证逻辑：
<ng2-chips [(ngModel)]="tags" [validator]="tagValidator"></ng2-chips>
在上面的示例中，我们将一个自定义的验证函数 tagValidator 绑定到了组件的 validator 属性上。
总结
通过使用 npm 包 @jaspero/ng2-chips，我们可以快速和轻松地创建漂亮、实用的标签输入框。通过本文的介绍和示例，相信大家已经了解了如何安装和使用这个 npm 包，并且可以配置和自定义标签输入框的各种属性和行为了。希望这篇文章对大家有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c5b81e8991b448e5e37