近年来，前端开发的快速发展受到越来越多开发者的关注。前端技术越来越成熟，越来越多的前端库和工具得到了广泛的应用。本文将介绍一个前端常用工具 @mattlewis92/ngx-chips，并详细说明在实际项目中的应用方法和指导意义。
什么是 @mattlewis92/ngx-chips
@mattlewis92/ngx-chips 是一个 Angular 的自动完成组件库，基于 ngx-chips 进行扩展开发，可以让开发者轻松地实现自动完成输入功能，支持传递任意对象，并提供多个内置样式和高度可定制的 API。
安装
安装使用 @mattlewis92/ngx-chips ，你必须要使用 npm 安装依赖：
npm i @mattlewis92/ngx-chips ng2-chips --save
这将安装最新版本的 @mattlewis92/ngx-chips 和 ng2-chips 依赖。
使用
使用 @mattlewis92/ngx-chips 很简单，在需要使用 @mattlewis92/ngx-chips 的组件中导入 NgxChipsModule 并在需要输入自动完成的标签中使用 [ng2-chips][ng2-chips]：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - -------------- - ---- -------------------------
------ - ------------ - ---- ------------------
-----------
---------
-------------
---------------
--
------------- -
-------------
--
---------- ---------------
--
------ ----- --------- --<!--在模板中使用ng2-chips--> <input type="text" ng2-chips [ngModel]="model" [source]="items"/>
经过上面的操作，就可以在组件中使用 @mattlewis92/ngx-chips 的输入自动完成功能了。
配置介绍
上面已经实现了 @mattlewis92/ngx-chips 的自动完成输入功能，但是这样是远远不够的，如果想要更好的使用 @mattlewis92/ngx-chips ，需要看一下它的配置参数。
placeholder
placeholder 参数可以在输入框上面提示一些信息或提示词，如果没有设置，这个输入框默认不会有任何提示。
<input type="text" ng2-chips [ngModel]="model" [source]="items" [placeholder]="'请填写'" />
displayMember
displayMember 参数用于定义在下拉列表中哪些属性应该在输入自动完成后被显示，该设置用于帮助用户更加理解他们选择的选项。
<input type="text" ng2-chips [ngModel]="model" [displayMember]="'name'" />
identityProperty
identityProperty 参数是定义在来源数据列表中哪个属性应该用于匹配自动完成表单中的输入。
<input type="text" ng2-chips [ngModel]="model" [identityProperty]="id" />
maxItems
maxItems 参数用于限制用户可以最多输入多少个值才能提交。
<input type="text" ng2-chips [ngModel]="model" [maxItems]="5" />
removable
removable 参数用于定义用户是否可以删除已经填写的项。
<input type="text" ng2-chips [ngModel]="model" [removable]="true" />
addOnBlur
addOnBlur 参数用于定义是否在失去焦点时添加所选项。
<input type="text" ng2-chips [ngModel]="model" [addOnBlur]="true" />
addedItem
addedItem 参数用于定义添加之前的逻辑。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ----------- - ---- -------------------------
------------
--------- -----------
------------ -----------------------
--
------ ----- ------------ ---------- ------ -
---------------
---------- -
---------- - --------- --------- ----------
-
--------------- ------------ -
--- ---- - ----------
--- ------ - ------------
---------------------- - - ------
-
-完整的例子可以参考 Github 项目仓库 @mattlewis92/ngx-chips 。
总结
经过本篇文章的介绍，相信大家对于 @mattlewis92/ngx-chips 的使用已经有了一个清晰的认识。使用自动完成组件库可以节省开发者的时间和精力，使得开发者可以更加专注于项目的核心需求。总体来说， @mattlewis92/ngx-chips 是一个高度灵活且易于使用的 Angular 库，建议尝试并应用于实际项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056b4581e8991b448e5459