前言
在 Web 前端开发中，我们经常需要对输入框中的文本内容进行提及、引用等操作，而 Angular 框架提供了一个方便易用的 npm 包 angular2-mentions-plus，可以轻松实现这些功能。本文将介绍如何使用该包及其相关配置。
安装
在使用 npm 包前，需要先安装该包。通过以下命令可以，在项目中引入 angular2-mentions-plus：
npm install angular2-mentions-plus --save
引用
- 为了使用 angular2-mentions-plus 包，需要在所需模块中做以下配置：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------ - ---- ------------------ ------ - ----------- - ---- ----------------- ------ - ------------- - ---- ------------------------- ------ - ----------- - ---- ----------------- ----------- -------- -------------- ------------ --------------- -- -- ------------- ------------- -------------- -------- ------------- -- ------ ----- -------- - -
- 在组件模板中使用 Mention：
<mention [items]="items"></mention>
其中，items 是一个数组，用于提供提及要用到的数据，比如：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- ---------
--------- -
-------- --------------------------
-
--
------ ----- ------------ -
----- - -
------ ----- ---- -----------------------------
------ ----- ---- ----------------------------
--
-配置
在组件中，我们可以使用以下属性和事件来配置 Mention：
属性
| 属性 | 类型 | 描述 |
|---|---|---|
| items* | mentionItems[] 或 (query: string) => Observable<mentionItems[]> |
提及项列表 |
| triggerChar | string |
触发提及的字符，默认为 "@" |
| labelKey | string |
提及项显示的属性，默认为 "name" |
| maxItems | number |
最多显示提及项，默认为 10 |
| disableSort | boolean |
禁用对提及项的排序，默认为 false |
| regexp | string |
匹配提及项的正则表达式，默认为 "@display"，其中 "display" 会被替换为 labelKey 属性值 |
事件
| 事件 | 描述 |
|---|---|
| onSelect | 选中提及项时触发，可用 $event 获取当前选择的提及项 |
| onSearchChange | 搜索框文字发生变化时触发，可用 $event 获取当前输入的搜索关键字 |
示例代码
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- ---------
--------- -
-------- -------- --------------- --------------
------------------- -------------------
------------------------- ---------------------------------------
------------------------------
----------
---- ------------ ---------------------------
-
--
------ ----- ------------ -
----- - -
------ ----- ---- -----------------------------
------ ----- ---- -----------------------------
------ ----- ---- -----------------------------
------ ----- ---- -----------------------------
------ ----- ---- -----------------------------
------ ----- ---- -----------------------------
--
------------------ ------- -
----- ------------- - ---------------------- -- ----------------------------------------
----- ---- - ---------------------- -- -
---- -------------
-- -------------------
------------
----
------
------------
---------------------------------------- - -----
-
------------------- -
----------------------- -----------
-
-结尾
通过以上配置和示例，我们可以轻松使用 angular2-mentions-plus 实现文本提及等功能，为用户提供更加方便快捷的体验。同时也可以根据实际需求，对 Mention 进行更加详细和深入的定制。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d1d81e8991b448dab91