在现代的 Web 开发中，前端开发已经越来越重要，前端工作也变得越来越复杂。为了提高开发效率，我们需要使用更多的工具和库来完成我们的工作。在这里，我们介绍一个非常方便的 npm 包，它叫做 ngrdev-comment-module，它可以帮助我们轻松地添加评论系统到我们的 Web 应用中。
ngrdev-comment-module 的功能和用途
ngrdev-comment-module 是一个基于 Angular 和 Firebase 的评论系统，它可以轻松地添加评论功能到任何 Angular 应用中。这个包中包括了一个评论组件和一个后端服务，可以让我们非常方便地集成到我们的应用中。
安装 ngrdev-comment-module
安装这个包非常简单，只需要在命令行中输入以下命令即可：
npm install ngrdev-comment-module
这将自动安装这个包及其所有依赖项。
使用 ngrdev-comment-module
在我们的 Angular 应用中使用 ngrdev-comment-module 非常简单。首先，我们需要在 app.module.ts 中导入模块：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------ - ---- ------------------ ------ - ------------------- - ---- ------------------------ ----------- -------- --------------- --------------------- ------------- --------------- ---------- -------------- -- ------ ----- --------- - -
这里我们导入了 NgrdevCommentModule，并将其添加到我们的应用程序中。
接下来，在我们想要添加评论组件的地方，我们只需要添加以下代码：
<app-comment></app-comment>
这将添加评论组件到我们的应用程序中。
配置 ngrdev-comment-module
ngrdev-comment-module 还需要 Firebase 来存储评论数据。在使用之前，我们需要先在 Firebase 中创建一个项目，并将其与我们的 Angular 应用程序相关联。这里我们提供一个简单的配置步骤：
在 Firebase 中创建一个项目，并获取其配置信息。
在根目录下创建一个 config 文件夹，创建一个 firebaseconfig.ts 文件，输入以下代码，将获取的配置信息填入其中：
export const firebaseConfig = {
apiKey: '***********************',
authDomain: '**********.firebaseapp.com',
databaseURL: 'https://**********.firebaseio.com',
projectId: '**********',
storageBucket: '**********.appspot.com',
messagingSenderId: '**********'
};- 在 app.module.ts 中导入 firebaseConfig：
import { firebaseConfig } from './config/firebaseconfig';- 在 imports 数组中添加 AngularFireModule 与 AngularFireDatabaseModule，并在 providers 数组中添加以下代码：
{
provide: FIREBASE_CONFIG,
useValue: firebaseConfig
},
AngularFirestore,
AngularFireDatabase示例代码
这里我们提供一个简单的示例代码，以演示如何使用 ngrdev-comment-module：
-- -------------------- ---- -------
------ - ---------- --------- - ---- ----------------
------ - ------------------- - ---- -------------------------
------ - ---------------- - ---- ------------------------
------------
--------- -----------
--------- -
-----
------------ -----------------------
------
-
--
------ ----- ------------ -
--------------------- - ------- ---- -- -------- -----------------
------------------- --- -------------------- - -
---------- -
------------------------------------------------------------
-
-在这里，我们导入了 AngularFireDatabase 和 CommentComponent，以及 ViewChild 装饰器。
在组件的 ngOnInit 方法中，我们调用了 comment 的 init 方法，并传入了从 Firebase 中获取的评论列表。
总结
ngrdev-comment-module 可以让我们非常方便地添加评论系统到我们的 Angular 应用中。这个包自带后端服务，并且很容易配置。它可以大大提高我们的开发效率，同时也可以让我们的用户更加互动。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cb481e8991b448da23d