使用Angular4.0开发星级评价组件
一、从父组件获得rating值
通常控制星星显示的raing值都是一个从父组件传递出去的Number类型值。
1、首先我们需要在调用星级组件的html中将值传递出去:
<div>
<app-stars [rating]="product.rating"></app-stars>
</div>
解释一下这里的app-stars标签就是对星级评价组件的调用,[rating]是一个属性绑定,product.rating是这个父组件想要传递出去的rating值。
2、然后星星组件为了获得这个值,需要使用输入属性@Input()
在星星组件的控制器(stars.component.ts)中写这样一段代码
@Input()
private rating: number = 0;
通过@Input,rating就获得了从父组件传递过来的值
二、显示星星
1、这里我使用了bootstrap
<span class="glyphicon glyphicon-star"></span>
显示一个实心星星
<span class="glyphicon glyphicon-star"></span>
显示一个空心星星
2、为了显示五个星星,我们需要用到循环指令
首先我们在控制器中(star.component.ts)中定义一个数组
private stars: boolean[];
ngOnInit(){
this.stars = [true,true,true,true,true];
}
更改我们刚刚的星星代码
<span *ngFor="let star of stars" class="glyphicon glyphicon-star"></span>
这样就会得到五个实心的星星
3、为了显示空心星星需要用到属性绑定中的样式绑定
再次更改星星代码
<span *ngFor="let star of stars" class="glyphicon glyphicon-star "
[class.glyphicon-star-empty]="star"></span>
三、用rating值控制星星的空实
要想通过rating值控制星星的空实,就需要用rating值动态更改stars数组,通过stars数组中的true,false控制星星的空实。
更改控制器(star.component.ts)中的代码
ngOnInit() {
this.stars = [];
for(let i = 1; i <= 5; i++) {
this.stars.push(i > this.rating);
}
}
这样stars数组就不再是写死的了,而是通过父组件传递进来的rating值动态变化。