改造在線競拍四

stars.component.ts

import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges} from '@angular/core';
@Component({
  selector: 'app-stars',
  templateUrl: './stars.component.html',
  styleUrls: ['./stars.component.css']
})
export class StarsComponent implements OnInit, OnChanges  {
  /*輸入屬性*/
  @Input()/*裝飾器*/
  private rating = 0;
  /*輸出屬性*/
  @Output()
  /*Input:rating;Output:ratingChange*/
  private ratingChange: EventEmitter<number> = new EventEmitter();
  private stars: boolean[];
  constructor() { }
  /*是否只讀*/
  @Input()
  private readonly = true;
  ngOnInit() {
  }
  ngOnChanges(changes: SimpleChanges): void {
    this.stars = [];
    for ( let i = 1; i <= 5; i++) {
      this.stars.push(i > this.rating);
    }
  }
  clickStar(index: number) {
    if (!this.readonly) {
      this.rating = index + 1;
      /*this.ngOnInit();  rating輸入屬性改變自動觸發*/
      this.ratingChange.emit(this.rating);
    }
  }
}

stars.component.html

<p>
  <!--[class.glyphicon-star-empty]="star":屬性綁定-->
  <span *ngFor="let star of stars; let i = index" class="glyphicon glyphicon-star "
  [class.glyphicon-star-empty]="star" (click)="clickStar(i)"></span>
  <!--{{rating}}:插值表達式-->
  <span> {{rating | number:'1.0-2'}}星</span>
</p>

product-detail.component.ts

import {Component, OnInit} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {Comment, Product, ProductService} from '../shared/product.service';

@Component({
  selector: 'app-product-detail',
  templateUrl: './product-detail.component.html',
  styleUrls: ['./product-detail.component.css']
})
export class ProductDetailComponent implements OnInit {
  /*1.聲明本地屬性*/
  product: Product;
  comments: Comment[];
  /* 星級評論*/
  newRating = 5;
  newComment = '默認好評';
  isCommentHidden = true;
  constructor(private  routeInfo: ActivatedRoute,
              private  productService: ProductService) { }
  ngOnInit() {
    /*2.從參數快照中獲得商品id*/
    const productId: number = this.routeInfo.snapshot.params['productId'];
    /*3.調用方法獲得商品*/
    this.product = this.productService.getProduct(productId);
    /*4.調用方法獲取評論*/
    this.comments = this.productService.getCommentsForProductId(productId);
  }
  addComment () {
    const comment = new Comment(0, this.product.id, new Date().toISOString(), 'someone', this.newRating, this.newComment);
    this.comments.unshift(comment);
    /*匿名的回調，初始值*/
    const sum = this.comments.reduce((sum, comment) => sum + comment.rating, 0);
    this.product.rating = sum / this.comments.length;
    this.newComment = '默認好評';
    this.newRating = 5;
    this.isCommentHidden = true;
  }
}

product-detail.component.html

<div class="well">
  <div>
    <button class="btn btn-success" (click)="isCommentHidden = !isCommentHidden">發表評論</button>
  </div>
  <!--星級評論-->
  <div [hidden]="isCommentHidden">
    <div>
    <app-stars [(rating)]="newRating" [readonly]="false"></app-stars>
    </div>
    <div>
      <textarea [(ngModel)]="newComment"></textarea>
    </div>
    <div>
      <button class="btn" (click)="addComment()">提交</button>
    </div>
  </div>
  <div class="row" *ngFor="let comment of comments">
    <hr>
    <div class="col-md-12">
      <app-stars [rating]="comment.rating"></app-stars>
      <span>{{comment.user}}</span>
      <span class="pull-right">{{comment.timestamp}}</span>
      <p></p>
      <p>{{comment.content}}</p>
    </div>
  </div>
</div>