Angular实现类似博客评论的递归显示及获取回复评(2)
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>
内容版权声明：除非注明，否则皆为本站原创文章。