首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Angular实现类似博客评论的递归显示及获取回复评论的数据

Posted in Javascript onNovember 06, 2017

前言

我们在一些技术博客中会经常看到很多递归评论，也即是我们可以回复博友的评论，且界面很美观，有梯度的显示格式，日前在空余时间写类似的 demo，所以记录下来，可以给需要的人一些借鉴的作用。
好了，废话少说，直奔主题。。。

思路

我们在写后台程序的时候，经常会遇到生成类似树的这种数据结构，我们直觉就是使用递归的方法来实现，起初我也是这么想的，就是写一个 Angular4 的递归方法，组成一个字符串，然后在界面显示，类似下面代码

@Component({
 selector: "comment",
 template: '{{ comments }}'
})
export class CommentComponent {

 public comments: string = "";

 generateComment(Comment comment) {
 this.comments = this.comments + "<div>" + comment.content + "</div>";
 if (comment.pComment != null) {
  generateComment(comment.pComment);
 }
 }
}

很天真的以为可以了，结果一试，标签不会被解析，才想起已经过了解析标签的过程了。。。

后来想着，现在的前端框架都是以组件化自称， Angular4 也不例外，那么一个 Component 可以嵌入任何 Component，那肯定可以嵌入自己，也就有了类似递归的概念了，想到这立马试试。。。

具体实现

思路是这样子，我定义了数据的格式，是每个评论下面有一个子评论数组，而不是每个评论有一个父评论，数据格式如下：

"comments": 
  [
  {
   "id": 1,
   "username": "James1",
   "time": "2017-07-09 21:02:21",
   "content": "哈哈哈1<h1>哈哈哈</h1>",
   "status": 1,
   "email": "1xxxx@xx.com",
   "cComments": [
    {
    "id": 2,
    "username": "James2",
    "time": "2017-07-09 21:02:22",
    "content": "哈哈哈2",
    "status": 1,
    "email": "2xxxx@xx.com",
    "cComments": null
   }
   ]
  }
  ]

CommentComponent 组件实现了评论模块，但是递归评论并不在这个组件实现，而是在子组件 CommentViewComponent 实现，因为 CommentComponent 还包括一个一个输入评论的文本框。

评论总模块 ComponentComponent 代码：

comment.component.ts

@Component({
 selector: 'comment',
 templateUrl: './comment.component.html',
 styleUrls: ['./comment.component.css']
})
export class CommentComponent implements OnInit {

 @Input()
 public comments: Comment[];

 ngOnInit(): void {
 }
}

comment.component.html

<div class="container font-small">
 <div class="row">
 <div class="col-lg-8 offset-lg-2 col-md-10 offset-md-1">

  <comment-view [comments]="comments"></comment-view>

  <div class="well" id="comment">
  <h4>{{ 'comment.leaveComment' | translate }}</h4>
  <form role="form">
   <div class="form-group">
   <input type="hidden" [(ngModel)]="id" name="id">
   <textarea [(ngModel)]="content" name="content" class="form-control" rows="5"></textarea>
   </div>
   <button type="submit" class="btn btn-primary">Submit</button>
  </form>
  </div>
 </div>
 </div>
</div>

comment.component.css

.media {
 font-size: 14px;
}

.media-object {
 padding-left: 10px;
}

子模块 ComponentViewComponent 代码：

component-view.component.ts

@Component({
 selector: 'comment-view',
 templateUrl: './comment-view.component.html',
 styleUrls: ['./comment-view.component.css']
})
export class CommentViewComponent implements OnInit {
 @Input()
 public comments: Comment[];

 constructor(private router: Router,
    private activateRoute: ActivatedRoute ) {
 }

 ngOnInit(): void {
 }
}

component-view.component.html

<div *ngFor="let comment of comments">
 <div class="media">
 <div class="pull-left">
  <span class="media-object"></span>
 </div>
 <div class="media-body">
  <h4 class="media-heading">{{ comment.username }}
  <small class="pull-right">{{ comment.time }} | <a href="#" rel="external nofollow" >{{ 'comment.reply' | translate }}</a></small>
  </h4>
  {{ comment.content }}
  <hr>
  <comment-view *ngIf="comment.cComments != null" [comments]="comment.cComments"></comment-view>
 </div>
 </div>
</div>

comonent-view.component.css

.media {
 font-size: 14px;
}

.media-object {
 padding-left: 10px;
}

结果

这时的展示结果如下图所示：

Angular实现类似博客评论的递归显示及获取回复评论的数据

上面只是说明了如何实现评论梯形显示，在博客评论中我们经常看到可以回复某一条评论，本文讲述如何实现点击某一条评论的回复按钮后，获取该条评论的内容并显示在输入框中。类似 CSDN 博客评论一样，点击回复后输入框自动添加了 [reply]u011642663[/reply]

思路

依据上一篇文章中的评论梯形显示，我们还需要实现点击回复后，屏幕自动到达输入框位置，并且获取了点击回复的评论的信息。首先分解一下这个功能点，在项目中我们也会经常分解功能点，这个功能点有 2 个小点：一是在每条评论中加上 [回复] 按钮，点击回复后跳到输入框位置；二是点击回复后，获取到点击回复的那条评论的信息。下面我们一一解决。

跳转到输入框

我们接触前段第一个语言便是 HTML，我们知道 HTML 中有一个 # 定位，下面代码简单解释一下。

假设这个 HTML 代码文件是 index.html

<html>
 <head>
 </head>
 <body>
 <a href="index.html#pointer" rel="external nofollow" >Click me to pointer</a>
 <div id="pointer">
  <h1>哈哈哈哈</h1>
 </div>
 </body>
</html>

上面代码只要点击 Click me to pointer 这个链接，页面就会跳到 id=”pointer” 这个 div 的位置。所以我们在实现这个点击回复跳转到输入框中就可以使用这个方法。

我们在 comment-component.html 中将评论输入框加入 id=”comment”，接下来就是路径拼接的问题了，我们可以通过 Angular 的 Router 的 url 来获取本页面的路径，然后在这个路径后面加入 #comment 就可以实现跳转了，下面是实现这个跳转功能的代码

添加 id=”comment”

comment-component.html

<!-- Comment -->
<div class="container font-small">
 <div class="row">
 <div class="col-lg-8 offset-lg-2 col-md-10 offset-md-1">

  <comment-view [comments]="comments" (contentEvent)="getReplyComment($event)" ></comment-view>

  <div class="well" id="comment">
  <h4>{{ 'comment.leaveComment' | translate }}</h4>
  <form role="form">
   <div class="form-group">
   <input type="hidden" [(ngModel)]="id" name="id">
   <textarea [(ngModel)]="content" name="content" class="form-control" rows="5"></textarea>
   </div>
   <button type="submit" class="btn btn-primary">Submit</button>
  </form>
  </div>
 </div>
 </div>
</div>

添加通过路由获取当前页面 URL

comment-view.component.ts

@Component({
 selector: 'comment-view',
 templateUrl: './comment-view.component.html',
 styleUrls: ['./comment-view.component.css']
})
export class CommentViewComponent implements OnInit {
 @Input()
 public comments: Comment[];

 // 用于跳转到回复输入框的url拼接
 public url: string = "";

 constructor(private router: Router,
    private activateRoute: ActivatedRoute ) {
 }

 ngOnInit(): void {
 this.url = this.router.url;
 this.url = this.url.split("#")[0];
 this.url = this.url + "#comment";
 }
}

添加链接 href=”“

comment-view.component.html

<div *ngFor="let comment of comments">
 <div class="media">
 <div class="pull-left">
  <span class="media-object"></span>
 </div>
 <div class="media-body">
  <h4 class="media-heading">{{ comment.username }}
  <small class="pull-right">{{ comment.time }} | <a href="{{url}}" rel="external nofollow" rel="external nofollow" (click)="reply(comment)" >{{ 'comment.reply' | translate }}</a></small>
  </h4>
  {{ comment.content }}
  <hr>
  <comment-view *ngIf="comment.cComments != null" [comments]="comment.cComments" (contentEvent)="transferToParent($event)"></comment-view>
 </div>
 </div>
</div>

这就实现了页面跳转的功能点，接下来实现获取回复的评论的信息。

获取回复的评论信息

有人会说获取回复的评论信息，这不简单么？加个 click 事件不就行了。还记得上一篇文章咱们是如何实现梯形展示评论的么？咱们是通过递归来实现的，怎么添加 click 事件让一个不知道嵌了多少层的组件能够把评论信息传给父组件？首先不具体想怎么实现，我们这个思路是不是对的：把子组件的信息传给父组件？答案是肯定的，我们就是要把不管嵌了多少层的子组件的信息传给 comment.component.ts 这个评论模块的主组件。
Angular 提供了 @Output 来实现子组件向父组件传递信息，我们在 comment-view.component.ts 模块中添加 @Output 向每个调用它的父组件传信息，我们是嵌套的，这样一层一层传出来，直到传给 comment-component.ts 组件。我们看代码怎么实现。

实现代码

comment-view.component.ts

@Component({
 selector: 'comment-view',
 templateUrl: './comment-view.component.html',
 styleUrls: ['./comment-view.component.css']
})
export class CommentViewComponent implements OnInit {
 @Input()
 public comments: Comment[];
 // 点击回复时返回数据
 @Output()
 public contentEvent: EventEmitter<Comment> = new EventEmitter<Comment>();
 // 用于跳转到回复输入框的url拼接
 public url: string = "";

 constructor(private router: Router,
    private activateRoute: ActivatedRoute ) {
 }

 ngOnInit(): void {
 this.url = this.router.url;
 this.url = this.url.split("#")[0];
 this.url = this.url + "#comment";
 }

 reply(comment: Comment) {
 this.contentEvent.emit(comment);
 }

 transferToParent(event) {
 this.contentEvent.emit(event);
 }
}

comment-view.component.html

<div *ngFor="let comment of comments">
 <div class="media">
 <div class="pull-left">
  <span class="media-object"></span>
 </div>
 <div class="media-body">
  <h4 class="media-heading">{{ comment.username }}
  <small class="pull-right">{{ comment.time }} | <a href="{{url}}" rel="external nofollow" rel="external nofollow" (click)="reply(comment)" >{{ 'comment.reply' | translate }}</a></small>
  </h4>
  {{ comment.content }}
  <hr>
  <comment-view *ngIf="comment.cComments != null" [comments]="comment.cComments" (contentEvent)="transferToParent($event)"></comment-view>
 </div>
 </div>
</div>

comment.component.ts

@Component({
 selector: 'comment',
 templateUrl: './comment.component.html',
 styleUrls: ['./comment.component.css']
})
export class CommentComponent implements OnInit {

 @Input()
 public comments: Comment[];

 // 要回复的评论
 public replyComment: Comment = new Comment();

 public id: number = 0;
 public content: string = "";

 ngOnInit(): void {
 }

 getReplyComment(event) {
 this.replyComment = event;
 this.id = this.replyComment.id;
 this.content = "[reply]" + this.replyComment.username + "[reply]\n";
 }
}

comment.component.html

<!-- Comment -->
<div class="container font-small">
 <div class="row">
 <div class="col-lg-8 offset-lg-2 col-md-10 offset-md-1">

  <comment-view [comments]="comments" (contentEvent)="getReplyComment($event)" ></comment-view>

  <div class="well" id="comment">
  <h4>{{ 'comment.leaveComment' | translate }}</h4>
  <form role="form">
   <div class="form-group">
   <input type="hidden" [(ngModel)]="id" name="id">
   <textarea [(ngModel)]="content" name="content" class="form-control" rows="5"></textarea>
   </div>
   <button type="submit" class="btn btn-primary">Submit</button>
  </form>
  </div>
 </div>
 </div>
</div>

解释一下代码逻辑：

我们在 comment-view.component.ts 添加以下几点：

  • 定义了@Output() contentEvent
  • 添加了reply(comment: Comment) 事件在点击回复的时候触发的，触发的时候 contentEvent 将 comment 传到父模块
  • 添加 transferToParent(event) 是接受子组件传来的 event, 并且继续将 event 传到父组件

在 comment.component.ts 中定义了 getReplyComment(event) 方法，该方法接收子组件传递来的评论信息，并将信息显示在页面上。大功告成。。。

效果图

Angular实现类似博客评论的递归显示及获取回复评论的数据

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对三水点靠木的支持。

Angular实现类似博客评论的递归显示及获取回复评论的数据

- Author -

1CSH1

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
IE事件对象（The Internet Explorer Event Object）
Jun 27 Javascript
jquery插件开发之实现jquery手风琴功能分享
Mar 10 Javascript
node.js中的fs.utimes方法使用说明
Dec 15 Javascript
js比较日期大小的方法
May 12 Javascript
VUE使用vuex解决模块间传值问题的方法
Jun 01 Javascript
Angular 向组件传递模板的两种方法
Feb 23 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
Mar 28 Javascript
微信小程序模拟cookie的实现
Jun 20 Javascript
React styled-components设置组件属性的方法
Aug 07 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
Oct 09 Javascript
Angular6使用forRoot() 注册单一实例服务问题
Aug 27 Javascript
Js实现复选框的全选、全不选反选功能代码实例
Feb 28 Javascript
vue自定义过滤器创建和使用方法详解
Nov 06 #Javascript
Bootstrap 树控件使用经验分享(图文解说)
Nov 06 #Javascript
vue复合组件实现注册表单功能
Nov 06 #Javascript
基于vue组件实现猜数字游戏
May 28 #Javascript
vue路由嵌套的SPA实现步骤
Nov 06 #Javascript
vue综合组件间的通信详解
Nov 06 #Javascript
Angular 4中如何显示内容的CSS样式示例代码
Nov 06 #Javascript
E1-XM(1) DSP(2) 放大器(1) ETON(1) R601SW(1) 接收机(2) 车机(1) S900(1) 矿石收音机(1) 电子管(5)
You might like
解析strtr函数的效率问题
2013/06/26 PHP
微信公众平台开发实现2048游戏的方法
2015/04/15 PHP
PHP yii实现model添加默认值的方法(两种方法)
2016/11/10 PHP
javascript css styleFloat和cssFloat
2010/03/15 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
2013/03/18 Javascript
JavaScript实现QueryString获取GET参数的方法
2013/07/02 Javascript
require.js深入了解 require.js特性介绍
2014/09/04 Javascript
javascript实现输出指定行数正方形图案的方法
2015/08/03 Javascript
jQuery Form 表单提交插件之formSerialize，fieldSerialize，fieldValue，resetForm，clearForm，clearFields的应用
2016/01/23 Javascript
超全面的javascript中变量命名规则
2017/02/09 Javascript
jq给页面添加覆盖层遮罩的实例
2017/02/16 Javascript
React中jquery引用的实现方法
2017/09/12 jQuery
详解如何在React组件“外”使用父组件的Props
2018/01/12 Javascript
Javascript实现动态时钟效果
2018/11/17 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
2019/03/28 Javascript
解决ele ui 表格表头太长问题的实现
2019/11/13 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
2020/05/13 Javascript
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
vue 获取url参数、get参数返回数组的操作
2020/11/12 Javascript
[01:25]DOTA2超级联赛专访iG 将调整状态找回自己
2013/06/05 DOTA
[01:09:13]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第三场 1月19日
2021/03/11 DOTA
python实现的守护进程(Daemon)用法实例
2015/06/02 Python
python如何去除字符串中不想要的字符
2020/07/05 Python
浅谈DataFrame和SparkSql取值误区
2018/06/09 Python
Python基于机器学习方法实现的电影推荐系统实例详解
2019/06/25 Python
Python拆分大型CSV文件代码实例
2019/10/07 Python
详解python 破解网站反爬虫的两种简单方法
2020/02/09 Python
解决Pytorch自定义层出现多Variable共享内存错误问题
2020/06/28 Python
CSS3地图动态实例代码(圆圈向外扩散)
2018/06/15 HTML / CSS
HTML5拖放API实现拖放排序的实例代码
2017/05/11 HTML / CSS
Nordgreen台湾官网：极简北欧设计手表
2019/08/21 全球购物
某同学的自我鉴定范文
2013/12/26 职场文书
管事部库房保管员岗位职责
2014/02/21 职场文书
学校文明单位申报材料
2014/05/06 职场文书
中班下学期幼儿评语
2014/12/30 职场文书
辞职申请书范本
2019/05/20 职场文书