在前端开发中，处理标签是一项常见的需求，而 ng2-tag-input 就是一个优秀的解决方案。本文将详细介绍如何安装和使用 ng2-tag-input。
安装 ng2-tag-input
安装 ng2-tag-input 可以直接使用 npm：
npm install ng2-tag-input --save
使用 ng2-tag-input
在 Angular 项目中使用 ng2-tag-input 需要引入对应的模块：
import { TagInputModule } from 'ng2-tag-input';
@NgModule({
imports: [TagInputModule]
})在 HTML 中使用 ng2-tag-input：
<tag-input [(ngModel)]='item.tags'> </tag-input>
这里的 [(ngModel)] 是 Angular 的双向数据绑定语法，下面是在组件中绑定 tags 的实现：
@Component({
selector: 'my-app',
template: `<tag-input [(ngModel)]='item.tags'></tag-input>`
})
export class AppComponent {
item = { tags: [] };
}关于更多参数的使用，可以查看官方文档。
ng2-tag-input 的指导意义
使用 ng2-tag-input 可以让我们更加方便地处理标签。而在实现过程中，我们也可以学到如何在 Angular 项目中引入第三方模块，以及如何使用 Angular 的双向数据绑定语法。
示例代码
-- -------------------- ---- ------- ------ - ---------- -------- - ---- ---------------- ------ - ----------- - ---- ----------------- ------ - ------------- - ---- ---------------------------- ------ - -------------- - ---- ---------------- ------------ --------- --------- --------- ----------- ------------------------------------- -- ------ ----- ------------ - ---- - - ----- -- -- - ----------- -------- --------------- ------------ ---------------- ------------- --------------- ---------- -------------- -- ------ ----- --------- - -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60946