在商品详情页面添加一个发表评论功能
- 需要实现的效果：点击星级组件的时候可以改变星星的状态（空心和实心），获取当前的下标得知点击的是第几颗星，由于下标是从0开始，所以rating的值为下标的值加一，然后在重新调用ngOnInit（因为在ngOnInit中是通过rating的值来决定星星是否显示）
<p>
<span *ngFor="let star of stars;let i=index" class="glyphicon glyphicon-star glyphicon-star-empty"
[class.glyphicon-star-empty]="star" (click)="clickStar(i)"
></span>
<span>{{rating}}星</span>
</p>
clickStar(index:number){
this.rating =index+1;
this.ngOnInit()
}
- 但是用于显示的星级组件应当是不允许点击改动，处于只读状态，只有评论的星级组件才可以点击，为了控制是否能够点击，定义一个布尔类型的属性readonly，默认为只读不允许点击为true
@Input()
private readonly:boolean =true;
clickStar(index:number){
if(!this.readonly){
this.rating =index+1;
this.ngOnInit()
}
- 在商品详情组件中定义两个属性newRating，newComment，用于保存最新的评价的星级（默认5星）和输入的评论内容
newRating:number=5;
newComment:string="";
- 构建发表评论功能，将星级组件设置为可以点击，双向绑定文本框的内容获取输入数据，绑定按钮的点击事件
<div>
<div><app-start [rating]="newRating" [readonly]="false"></app-start></div>
<div>
<textarea [(ngModel)]="newComment"></textarea>
</div>
<button class="btn" (click)="addComment()">发表</button>
</div>
- 编辑点击事件，new一个评论对象，设置要传入的数据，将刚获取的星级数据和评论数据传入其中，将这个评论对象推送到评论数组中
addComment(){
let comment=new Comment(0,this.product.id,new Date().toISOString(),"mine",this.newRating,this.newComment);
this.comments.unshift(comment);
}
- 但是此时发表出去的星级评价与用户选定的星级评价并不相同，因为它并不是双向数据绑定，因此star子组件中需要一个输出属性@Output，将子组件变化的rating发射出去，让父组件接收
@Output()
private ratingChange:EventEmitter<number>=new EventEmitter();
clickStar(index:number){
if(!this.readonly){
this.rating =index+1;
this.ngOnInit();
this.ratingChange.emit(this.rating)
}
}
<app-start [(rating)]="newRating" [readonly]="false"></app-start>
- 设计一个按钮让评论区域从隐藏状态到出现，将isCommentHidden默认为true，将评论区域绑定hidden为isCommentHidden
<div>
<button class="btn btn-success" (click)="isCommentHidden=!isCommentHidden">评论</button>
</div>
<div [hidden]="isCommentHidden">
- 在点击发表评论后将文本框情况，将星级设置为默认的5星，将评论区域隐藏
addComment(){
let comment=new Comment(0,this.product.id,new Date().toISOString(),"mine",this.newRating,this.newComment);
this.comments.unshift(comment);
this.newComment=null;
this.newRating=5;
this.isCommentHidden=true
}
- 但是在设置完之后，其他样式显示完全和预期一样，但是星级评价的数据变成5星，但是星星的样式却没有复位，使用ngOnChanges，在star组件中调用ngOnInit，让其在输入属性rating改变时改变stars数组，再次判断星级
ngOnChanges(changes: SimpleChanges): void {
this.ngOnInit()
}
- 在发表评论评定星级后，让商品的平均分随之变化
当开始第一次循环是传入的sum是右边的值0，comment是数组中的第一个元素，在这个匿名回调中用0加上第一个评星作为返回值，也就是下一次调用回调的sum
addComment(){
let comment=new Comment(0,this.product.id,new Date().toISOString(),"mine",this.newRating,this.newComment);
this.comments.unshift(comment);
let sum =this.comments.reduce((sum,comment)=>sum + comment.rating,0);
this.product.rating=sum/this.comments.length;
this.newComment=null;
this.newRating=5;
this.isCommentHidden=true
}
- 最后使用管道格式化星级评分
<span>{{rating |number:'1.0-2'}}星</span>
