在商品详情页面添加一个发表评论功能

1. 需要实现的效果：点击星级组件的时候可以改变星星的状态（空心和实心），获取当前的下标得知点击的是第几颗星，由于下标是从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()
}

2. 但是用于显示的星级组件应当是不允许点击改动，处于只读状态，只有评论的星级组件才可以点击，为了控制是否能够点击，定义一个布尔类型的属性readonly，默认为只读不允许点击为true

@Input()
private readonly:boolean =true;

clickStar(index:number){
  if(!this.readonly){
    this.rating =index+1;
    this.ngOnInit()
  }

3. 在商品详情组件中定义两个属性newRating，newComment，用于保存最新的评价的星级（默认5星）和输入的评论内容

newRating:number=5;
newComment:string="";

4. 构建发表评论功能，将星级组件设置为可以点击，双向绑定文本框的内容获取输入数据，绑定按钮的点击事件

<div>
  <div><app-start [rating]="newRating" [readonly]="false"></app-start></div>
  <div>
    <textarea [(ngModel)]="newComment"></textarea>
  </div>
  <button class="btn" (click)="addComment()">发表</button>
</div>

5. 编辑点击事件，new一个评论对象，设置要传入的数据，将刚获取的星级数据和评论数据传入其中，将这个评论对象推送到评论数组中

addComment(){
  let comment=new Comment(0,this.product.id,new Date().toISOString(),"mine",this.newRating,this.newComment);
  this.comments.unshift(comment);
}

6. 但是此时发表出去的星级评价与用户选定的星级评价并不相同，因为它并不是双向数据绑定，因此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>

7. 设计一个按钮让评论区域从隐藏状态到出现，将isCommentHidden默认为true，将评论区域绑定hidden为isCommentHidden

<div>
  <button class="btn btn-success" (click)="isCommentHidden=!isCommentHidden">评论</button>
</div>

<div [hidden]="isCommentHidden">

8. 在点击发表评论后将文本框情况，将星级设置为默认的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
}

9. 但是在设置完之后，其他样式显示完全和预期一样，但是星级评价的数据变成5星，但是星星的样式却没有复位，使用ngOnChanges，在star组件中调用ngOnInit，让其在输入属性rating改变时改变stars数组，再次判断星级

ngOnChanges(changes: SimpleChanges): void {
  this.ngOnInit()
}

10. 在发表评论评定星级后，让商品的平均分随之变化
    当开始第一次循环是传入的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
}

11. 最后使用管道格式化星级评分

<span>{{rating |number:'1.0-2'}}星</span>

---