在前端开发中，我们常常需要实现输入框中的 Mention 功能，在用户输入@符号后，能够展示出类似联系人列表的下拉框，以方便用户选择某个特定的联系人。为了实现这个功能，我们可以使用 npm 包 ngx-mentions-input。
什么是 ngx-mentions-input？
ngx-mentions-input 是一个 Angular 组件，用于实现 Mention 功能。它支持对用户输入的 trigger 进行自定义匹配，可以自定义 Mention 展示样式，支持多 suggest 选框等功能，是一个非常实用的 Angular 插件。
ngx-mentions-input 的安装
使用 ngx-mentions-input 首先需要先进行安装。在安装之前，确保已经安装了 Angular 以及 Rxjs。
安装时需要输入以下命令：
npm install ngx-mentions-input --save
然后在需要使用 ngx-mentions-input 的组件中，引入 ngx-mentions-input 模块：
import { NgxMentionsInputModule } from 'ngx-mentions-input';ngx-mentions-input 的使用
使用 ngx-mentions-input 需要进行以下几个步骤：
- 在模板中添加 ngx-mentions-input 标签，并进行参数配置；
- 在组件中进行 trigger 的匹配和数据的加载；
- 在组件中监听 ngx-mentions-input 的 change 事件，获取用户选择的 Mention 数据。
在模板中添加 ngx-mentions-input
首先，在模板中添加 ngx-mentions-input 标签，并进行参数配置。ngx-mentions-input 组件支持以下几个参数：
- items: Mention 数据列表；
- triggerChars: 触发 Mention 的字符；
- labelKey: 展示在下拉框中的数据属性；
- maxItems: 最大展示数量；
- minChars: 触发 Mention 的最小字符数；
- suggestDelay: 下拉框出现的延迟时间；
- displaySuggests: 是否展示下拉框；
- clearSuggestsOnBlur: 是否在失去焦点时自动清除下拉框。
可以配置一个简单的 ngx-mentions-input，如下：
-- -------------------- ---- -------
-----
-------------------
----------------------
----------------------
-----------------------
---------------
--------------
--------------------
------------------------
----------------------------
-----------------------------------
----------------------
------进行 trigger 的匹配和数据的加载
在组件中，需要进行 trigger 的匹配和数据的加载。这可以通过使用 ngx-mentions-input 的 triggerCharPipe 来实现。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---------- - ---- -------
------ - ------- - ---- ---------------------
------------
--------- -----------
--------- -
-----
-------------------
----------------------
----------------------
-----------------------
---------------
--------------
--------------------
------------------------
----------------------------
-----------------------------------
----------------------
------
--
--
------ ----- ------------- ---------- ------ -
------------- --------- - -
-
--------- --------
------- ------------------------------------
--
-
--------- ------
------- ------------------------------------
--
--
------------- --
----------- ---- --
---------------- -------- --------------------- -
----- ----- - ------------------------------- --
---------------------------------------------------------
--
------ ---------------------------
-
------------------- -------- ------ -
----- ------- - --------------------------------
------ ------- -- -------------- - ---------------------- - -- - -----
-
-上述代码中的 loadItems 方法用于从 mentionItems 中过滤符合条件的 Mention 数据，并且使用 RxJS 的 of 和 delay 操作符进行延迟。matchTrigger 方法用于匹配符合触发字符的文本。
监听 ngx-mentions-input 的 change 事件
最后，在组件中监听 ngx-mentions-input 的 change 事件，获取用户选择的 Mention 数据。在获取用户选择的 Mention 数据时，需要对其进行格式化，例如需要在 Mention 数据前后添加标记。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ----------- -- - ---- -------
------ - ----- - ---- -----------------
------ - ------- - ---- ---------------------
------------
--------- -----------
--------- -
-----
-------------------
----------------------
----------------------
-----------------------
---------------
--------------
--------------------
------------------------
----------------------------
-----------------------------------
----------------------
------
--
--
------ ----- ------------- ---------- ------ -
------------- --------- - -
-
--------- --------
------- ------------------------------------
--
-
--------- ------
------- ------------------------------------
--
--
------------- --
----------- ---- --
---------------- -------- --------------------- -
----- ----- - ------------------------------- --
---------------------------------------------------------
--
------ ---------------------------
-
------------------- -------- ------ -
----- ------- - --------------------------------
------ ------- -- -------------- - ---------------------- - -- - -----
-
----------------------- - ------ ------ --- ---- -
----- -------- - ---------------- --
-- ----- ------- ----------------
----------------------
-
-ngx-mentions-input 的深入学习
ngx-mentions-input 支持的参数非常丰富，可以自定义各种各样的配置项，如自定义 trigger、自定义下拉框模板等。如果想要深入学习，可以参考 ngx-mentions-input 的官方文档，并查看源码。
总结
ngx-mentions-input 是一个非常实用的 Angular 插件，可以方便地实现 Mention 功能。使用 ngx-mentions-input 需要进行三个步骤：在模板中添加 ngx-mentions-input 标签，并进行参数配置；在组件中进行 trigger 的匹配和数据的加载；在组件中监听 ngx-mentions-input 的 change 事件，获取用户选择的 Mention 数据。同时，ngx-mentions-input 还支持自定义 trigger 和下拉框模板等功能。在开发中，可以根据具体情况进行使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5b51ab1864dac6701a