在现代 web 开发中，我们经常会用到用户反馈和社交交流的功能，其中评论系统是一个不可或缺的组件。ngx-disqus 正是为了方便在 Angular 项目中使用 Disqus 评论系统而开发出来的一个 npm 包。
安装和配置
在使用 ngx-disqus 之前，首先需要在自己的 Disqus 账户中创建新站点并获取对应的 shortname。在创建好 Disqus 站点后，就可以在项目中安装 ngx-disqus 了。
使用 npm 安装 ngx-disqus：
npm install ngx-disqus --save
安装完成后，还需要在项目中导入已安装的 ngx-disqus 模块：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - --------------- - ---- ------------- ------ - ------------ - ---- ------------------ ----------- ------------- --------------- -------- --------------- ------------------------- ---------- ---------------- ---- ---------- --------------- -- ------ ----- --------- --
在以上代码中，我们在使用模块的时候需要配置 shortname，因此需要先获取到在 Disqus 中创建的 shortname。然后在 NgxDisqusModule.forRoot 中把 shortname 传入，这样 ngx-disqus 就可以正确的和对应的 Disqus 站点进行通信了。
使用 ngx-disqus
安装和配置完成后，我们就可以开始在项目中使用 ngx-disqus 提供的组件了。
<ngx-disqus [identifier]="post.id" [title]="post.title"></ngx-disqus>
在使用时，[identifier] 和 [title] 属性需要分别传入对应的帖子 ID 和标题。这样评论系统就可以正确的加载当前帖子的评论了。
示例代码
以下为一个简单的示例代码，可以在自己的 Angular 项目中进行测试。
<div *ngFor="let post of posts">
<h2>{{ post.title }}</h2>
<p>{{ post.content }}</p>
<ngx-disqus [identifier]="post.id" [title]="post.title"></ngx-disqus>
</div>-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
-----
----------- ---------- -------
---- ----------- ---- -- -------
------ ---------- -------
----- ------------ ------
----------- ---------------------- ----------------------------------
------
------
--
--
------ ----- ------------ -
----- - -
-
--- --
------ --------
-------- --------------
--
-
--- --
------ --------
-------- --------------
--
--
-总结
通过本文的介绍，我们了解了 ngx-disqus 的基本安装和使用方法，并且提供了一个简单的示例代码供大家参考。在实际项目中，我们可以根据 ngx-disqus 提供的 API 进一步定制和使用评论系统，提供更好的用户交流体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b6151ab1864dac6733e