介绍
Ment.io 是一款强大的前端评论系统，基于 AngularJS 和 Bootstrap 构建，可通过 npm 安装并集成到您的项目中。本文将详细介绍如何使用 npm 包 ment.io 搭建自己的前端评论系统。
准备工作
在开始前，请确保您已经安装了 Node.js、npm 和 AngularJS。
安装 ment.io
在命令行中输入以下命令进行安装：
npm install ment.io --save
在 Angular 应用中使用 ment.io
添加依赖
在 Angular 应用的 app.module.ts 中，导入 MentModule 模块并添加到 NgModule 的 imports 中：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------- - ---- -----------------
------ - ------------ - ---- ------------------
------ - ---------- - ---- ----------
-----------
-------- -
--------------
------------
----------
--
------------- - ------------ --
---------- - ------------ -
--
------ ----- --------- - -添加评论组件
在组件 HTML 中添加 ment-io 标签：
<ment-io ngModel="comment"
mentio-typed-trigger="."
mentio-items="users"
mentio-search="searchPeople(searchTerm)"
mentio-select="onSelect(item)">
</ment-io>ngModel 指定了评论的模型， mentio-typed-trigger 定义用户触发提醒的键入字符，mentio-items 指定项目列表， mentio-search 定义搜索方法，mentio-select 定义选择方法。
创建评论模型
在组件的 TS 文件中定义评论模型：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
-------- ------ - ---
------ ----- - -
------- ----- ----- ------ ------------
------- ----- ----- ------ ------------
------- ------ --------- ------ -----------------
--
------------------ -
-- ------
-
-------------- -
-- ------
-
-定义搜索和选择方法
在组件的 TS 文件中定义搜索和选择方法：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
-------- ------ - ---
------ ----- - -
------- ----- ----- ------ ------------
------- ----- ----- ------ ------------
------- ------ --------- ------ -----------------
--
------------------------ -
-- -----------
-
-------------- -
-- ------
-
-总结
通过本文，我们了解了如何使用 npm 包 ment.io 在 Angular 应用中构建自己的前端评论系统。同时，我们还讨论了如何定义搜索和选择方法。希望这篇文章对您有所帮助，祝愉快编码！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f3f1d8e776d08040b8c