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

前言

我们在一些技术博客中会经常看到很多递归评论，也即是我们可以回复博友的评论，且界面很美观，有梯度的显示格式，日前在空余时间写类似的 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;
}

结果

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

上面只是说明了如何实现评论梯形显示，在博客评论中我们经常看到可以回复某一条评论，本文讲述如何实现点击某一条评论的回复按钮后，获取该条评论的内容并显示在输入框中。类似 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) 方法，该方法接收子组件传递来的评论信息，并将信息显示在页面上。大功告成。。。

效果图

总结

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

赞 (0)

相关推荐

  • 使用AngularJS和PHP的Laravel实现单页评论的方法

    使用AngularJS和PHP的Laravel实现单页评论的方法

    完整代码:https://github.com/scotch-io/laravel-angular-comment-app 目前,Laravel和Angular均已经成为了Web发展世界里非常著名的工具.Laravel以给PHP社区引入的伟大内容著称,Angular以其惊人的前端工具及简单著称.组合这两大框架似乎是合乎逻辑的下一步. 在我们的使用环境下,我们将使用Laravel作为后端的RESTful API,Angular作为前端,以创建一个简单的单页的评论应用. 下面是一个简单的例子,展示了

  • 基于Angularjs+mybatis实现二级评论系统(仿简书)

    基于Angularjs+mybatis实现二级评论系统(仿简书)

    一直想写个评论系统,看了下多说,网易,简书的评论,想了下自己该实现怎样的评论系统. 评论系统关键是嵌套层数以及数据库表设计.嵌套层数多,表结构复杂,呈现也麻烦,最后决定实现一个二级评论.系统由maven构建,springboot快速搭建spring环境.前台采用angularjs+bootstrap,后台使用springmvc+mybatis,数据库采用MySQL.前台请求后台API操作评论. 目录结构 数据库表设计 ##说说表或者文章表 create table saying ( saying

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

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

    前言 我们在一些技术博客中会经常看到很多递归评论,也即是我们可以回复博友的评论,且界面很美观,有梯度的显示格式,日前在空余时间写类似的 demo,所以记录下来,可以给需要的人一些借鉴的作用. 好了,废话少说,直奔主题... 思路 我们在写后台程序的时候,经常会遇到生成类似树的这种数据结构,我们直觉就是使用递归的方法来实现,起初我也是这么想的,就是写一个 Angular4 的递归方法,组成一个字符串,然后在界面显示,类似下面代码 @Component({ selector: "comment&qu

  • 使用python和Django完成博客数据库的迁移方法

    使用python和Django完成博客数据库的迁移方法

    上一讲完成了基本博客的配置和项目工程的生成.这次开始将博客一些基本的操作主要是数据库方面学习. 1.设计博客数据库表结构 博客最主要的功能就是展示我们写的文章,它需要从某个地方获取博客文章数据才能把文章展示出来,通常来说这个地方就是数据库.我们把写好的文章永久地保存在数据库里,当用户访问我们的博客时,Django 就去数据库里把这些数据取出来展现给用户. 博客的文章应该含有标题.正文.作者.发表时间等数据.一个更加现代化的博客文章还希望它有分类.标签.评论等.为了更好地存储这些数据,我们需要合理

  • python爬虫 正则表达式使用技巧及爬取个人博客的实例讲解

    python爬虫 正则表达式使用技巧及爬取个人博客的实例讲解

    这篇博客是自己<数据挖掘与分析>课程讲到正则表达式爬虫的相关内容,主要简单介绍Python正则表达式爬虫,同时讲述常见的正则表达式分析方法,最后通过实例爬取作者的个人博客网站.希望这篇基础文章对您有所帮助,如果文章中存在错误或不足之处,还请海涵.真的太忙了,太长时间没有写博客了,抱歉~ 一.正则表达式 正则表达式(Regular Expression,简称Regex或RE)又称为正规表示法或常规表示法,常常用来检索.替换那些符合某个模式的文本,它首先设定好了一些特殊的字及字符组合,通过组合的&

  • 使用java springboot制作博客管理系统

    使用java springboot制作博客管理系统

    目录 前言 需求分析 用户管理. 文章管理. 链接管理. 日志管理. 数据管理. 系统管理. 功能分析 部分表设计 部分代码实现 前言 博客,又译为网络日志. 部落格或部落阁等,是一种通常由个人管理.不定期张贴新的文章的网站. 博客上的文章通常根据张贴时间, 以倒序方式由新到旧排列. 许多博客专注在特定的课题上提供评论或新闻, 其他则被作为比较个人的日记. 一个典型的博客结合了文字.图像. 其他博客或网站的链接. 及其它与主题相关的媒体. 能够让读者以互动的方式留下意见,是许多博客的重要要素.大

  • 使用springboot制作博客管理系统

    使用springboot制作博客管理系统

    目录 前言 需求分析 用户管理. 文章管理. 链接管理. 日志管理. 数据管理. 系统管理. 功能分析 部分表设计 部分代码实现 前言 博客,又译为网络日志. 部落格或部落阁等,是一种通常由个人管理.不定期张贴新的文章的网站. 博客上的文章通常根据张贴时间, 以倒序方式由新到旧排列. 许多博客专注在特定的课题上提供评论或新闻, 其他则被作为比较个人的日记. 一个典型的博客结合了文字.图像. 其他博客或网站的链接. 及其它与主题相关的媒体. 能够让读者以互动的方式留下意见,是许多博客的重要要素.大

  • Python个人博客程序开发实例信息显示

    目录 1.分页显示文章列表 1.1 获取分页记录 1.2 渲染分页导航部件 2.显示文章正文 3.文章固定链接 4.显示分类文章列表 5.显示评论列表 6.发表评论与回复 7.支持回复评论 8.网站主题切换 Python个人博客程序开发实例框架设计中,我们已经完成了 数据库设计.数据准备.模板架构.表单设计.视图函数设计.电子邮件支持 等总体设计的内容,本篇博客将介绍博客前台的实现.博客前台需要开放给所有用户,这里包括 显示文章列表.博客信息.文章内容和评论 等功能. 1.分页显示文章列表 为了

  • 如何使用python爬取csdn博客访问量

    如何使用python爬取csdn博客访问量

    最近学习了python和爬虫,想写一个程序练练手,所以我就想到了大家都比较关心的自己的博客访问量,使用python来获取自己博客的访问量,这也是后边我将要进行的项目的一部分,后边我会对博客的访问量进行分析,以折线图和饼图等可视化的方式展示自己博客被访问的情况,使自己能更加清楚自己的哪些博客更受关注,博客专家请勿喷,因为我不是专家,我听他们说专家本身就有这个功能. 一.网址分析 进入自己的博客页面,网址为:http://blog.csdn.net/xingjiarong 网址还是非常清晰的就是cs

  • 使用Python实现博客上进行自动翻页

    使用Python实现博客上进行自动翻页

    先上一张代码及代码运行后的输出结果的图! 下面上代码: # coding=utf-8 import os import time from selenium import webdriver #打开火狐浏览器 需要V47版本以上的 driver = webdriver.Firefox()#打开火狐浏览器 url = "http://codelife.ecit-it.com"#这里打开我的博客网站 driver.get(url)#设置火狐浏览器打开的网址 time.sleep(2) #使

  • nodejs个人博客开发第三步 载入页面

    本文为大家分享了nodejs个人博客开发的载入页面,具体内容如下 模板引擎 使用ejs作为我们博客的前端模板引擎,用来从json数据生成html字符串 安装:npm install ejs -save 使用:入口文件中写入下面代码,定义/view/目录为视图目录 /*模板引擎*/ application.set('views',__dirname+'/views'); application.engine('.html',require("ejs").__express); appli

  • Yii实现单用户博客系统文章详情页插入评论表单的方法

    本文实例讲述了Yii实现单用户博客系统文章详情页插入评论表单的方法.分享给大家供大家参考,具体如下: action部分: <?php function test($objs) { $objs->var=10; } class one { public $var=1; } $obj=new one(); echo $obj->var.'<p>'; test($obj); echo $obj->var; exit; PostController.php页面: ... /**

随机推荐