改造線上競拍四
阿新 • • 發佈:2019-01-04
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>