在前端的开发过程中，组件库和工具集非常重要。只需要在npm上搜索，就能找到数以万计的npm包。这些npm包有些很强大，有些则只是实用工具。本文将介绍一款非常便捷且使用广泛的npm包——noomz-ng2-tag-input。
1. noomz-ng2-tag-input介绍
noomz-ng2-tag-input是一款基于angular2+的标签编辑器组件，它可以让用户快速、方便地添加和删除标签。这个npm包支持国际化（i18n），并提供了多个事件供开发者自由控制。
2. noomz-ng2-tag-input安装及使用
您可以通过以下命令在您的应用程序中安装noomz-ng2-tag-input：
npm install noomz-ng2-tag-input --save
然后在您的应用程序中引入noomz-ng2-tag-input：
import { NoomzNg2TagInputModule } from 'noomz-ng2-tag-input';
@NgModule({
imports: [
NoomzNg2TagInputModule
]
})接下来您就可以在您的HTML中使用noomz-ng2-tag-input：
<noomz-ng2-tag-input [tags]="myTags"
[placeholder]="'Enter a tag'"
(inputAddTag)="onAddTag($event)"
(inputRemoveTag)="onRemoveTag($event)"></noomz-ng2-tag-input>3. noomz-ng2-tag-input的参数和事件
- tags：一个字符串数组，表示当前已添加的标签
- placeholder：输入框中占位符的文本
- inputAddTag：当用户添加标签时触发
- inputRemoveTag：当用户删除标签时触发
4. noomz-ng2-tag-input示例
以下代码演示了noomz-ng2-tag-input如何使用：
<noomz-ng2-tag-input [tags]="myTags"
[placeholder]="'Enter a tag'"
(inputAddTag)="onAddTag($event)"
(inputRemoveTag)="onRemoveTag($event)"></noomz-ng2-tag-input>-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- ---------
--------- --------------------- ---------------
--------------------- - -----
--------------------------------
--------------------------------------------------------------
--
------ ----- ------------ -
------ - -------- ------ --------------
------------- ------- -
-- ----
----------------------
-
---------------- ------- -
-- ----
--- ----- - -------------------------
-- ------ - --- -
------------------------- ---
-
-
-5. 总结
noomz-ng2-tag-input是一个非常方便的angular2+标签编辑器组件，它为开发者提供了快速、方便的标签添加和删除功能。在本文中，您学习了noomz-ng2-tag-input的安装、使用、参数、事件和示例。祝您在开发过程中使用愉快。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005563e81e8991b448d322a