在前端开发中，经常需要使用到输入框中所谓“@多选”功能，如邮件地址输入时可以输入多个地址，并且可以使用自动提示功能。这时，我们可以使用一个方便的 npm 包 angular2-multimentions。
什么是 angular2-multimentions？
angular2-multimentions 是一个 Angular2 组件，用于在输入框中实现 “@ 多选”自动提示/选择功能。
安装
我们可以使用 npm 进行安装：
--- ------- ----------------------
使用步骤
1. 导入
在组件中导入 angular2-multimentions 库：
------ - -------------------- - ---- -------------------------
2. 注册
在 NgModule 中引入 and 引用该库：
----------- --- -------- ----- ---------------------- --- -- ------ ----- --------- - -
3. 创建输入框
在 HTML 文件中使用 ng-template 创建输入框：
------------ ----------- --------- ---- -------- --- ---- ---------------- ------------------------------ -------------- --------------------- --------------- ------------------------- ---------------------- ------------------------------- --------------------------- ------------------------
4. 配置
在 component 中定义和配置 users 数组，并定义 isSelected 方法、fo 方法和 onChange 方法：
------------
--------- ---------
--------- -
-----
--------- ------- ---- ------------------
---------------------
---------------
-------------------------
----------------------
-------------------------------
---------------------------
------------------------
--------
--
------ ----- ------------ -
----- - -
- --- ---- ----- ----- -------- --
- --- ---- ----- ------ ------ --
- --- ---- ----- ---- ------ --
- --- ---- ----- -------- --
--
-------- - -
-----
--------- ------- ---- ------------------
---------------------
---------------
-------------------------
----------------------
---------------------------
------------------------
--------
----- - ------------------ -- --------
---------- - ------ ------- -- -
------ ------------------------ -- ------ --- ----- -- --
--
-- - ------ ------- -- -
--- ---- - ------------------- -- ------ --- ------
------ ---- - -------------------- ---------------------- - -----
--
--------------- -
-------------------
-
-指导意义
通过上面的示例，我们可以发现 angular2-multimentions 可以快速实现选择框的自动提示/选择功能，而且可以自定义选择框样式。这个功能在实现许多基础功能，例如邮件地址输入，都非常实用，节省时间和精力。
示例代码
完整的示例代码可以在 GitHub 上获取：https://github.com/willmendesneto/angular2-multimensions-demo。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005595181e8991b448d6b7b