使用Angular4.0开发星级评价组件

使用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值动态变化。