Angular 星级评分组件

一、需求演变及描述：

1. 有一个“客户对公司的总体评价”的字段（evalutation）。字段为枚举类型，0-5，对应关系为：0-暂无评价，1-很差，2-差，3-一般，4-好，5-很好

2. 后来需要根据评分使用星星来表现，一共5颗星，分为实星和空星，例如，当3分时，三颗星星被点亮，即3颗实星2颗空星。

二、开发前准备：

1. 用于描述星星的图标，也可以是图片，我这里使用 iconfont

2. 新建一个星级评分组件，便于复用

通过命令 ng g component rating 我新建了一个星级评分组件

三、从父组件中获取“客户对公司的总体评价”的字段的值

通常控制星星显示的 evalutation 值都是一个从父组件传递出去的Number类型值。
1、首先我们需要在调用星级组件的父组件模板中将值传递出去：

<li class="companyevalutation">客户对公司的总体评价：

  <app-rating [starsRating]="repairs.evalutation"></app-rating>

</li>

说明：app-rating 是新建的星级评分组件，使用 starsRating 属性绑定 evalutation 的值

2、星级组件为了获得这个值，需要使用输入属性 @Input()
在星星组件的控制器（rating.component.ts)中写这样一段代码

@Input()

  private starsRating: number = 0;

说明：@input 用来定义模块的输入，用于从父组件向子组件传递数据

在这里可以将 starsRating 的值传递出去。

三、显示实星和空星

1. 显示5颗实星

要显示5颗实星可以这样做：

<span class="iconfont icon-start_c"></span>

<span class="iconfont icon-start_c"></span>

<span class="iconfont icon-start_c"></span>

<span class="iconfont icon-start_c"></span>

<span class="iconfont icon-start_c"></span>

但是这样的做法未免太过暴力，假如要显示100颗星，岂不是要写100行同样的代码。

显示5颗实星，可以使用 angular 的循环

<span *ngFor="let star of stars;" class="iconfont icon-start_c"></span>

同时在控制器里面，定义 stars 的值：

stars: boolean[];

constructor() { }

ngOnInit() {

   this.stars = [true, true, true, true, true];

}

这样就得到了5颗实心的星星。

star 的值为 true 时，添加 icon-start_n 类，显示空星。

<span *ngFor="let star of stars;" class="rating iconfont icon-start_c" [class.icon-start_n]="star"></span>

获取实际的星星个数：

get starsRating(): number {

    return this._starsRating;

}

@Input() set starsRating(value: number){

    this._starsRating = value;

    this.rating();

}

stars 为布尔型的数组，值为 false 将会显示实星，值为 true 将会显示空星。

public rating(): void {

  this.stars = [];

  for (let i = 1; i <= 5; i++){

    this.stars.push(i > this.starsRating);

  }

}

如果 starRating 的值为 3，stars = [false, false, false, true, true]; 视图显示三颗实星，两颗空星

四、源码：

rating.component.html：

<span *ngFor="let star of stars;" class="rating iconfont icon-start_c" [class.icon-start_n]="star"></span>

rating.component.ts：

import {Component, Input, OnInit} from '@angular/core';

@Component({

  selector: 'app-rating',

  templateUrl: './rating.component.html'

})

export class RatingComponent implements OnInit {

  public _starsRating: number = 0;

  public stars: boolean[];

  get starsRating(): number {

    return this._starsRating;

  }

  @Input() set starsRating(value: number){

    this._starsRating = value;

    this.rating();

  }

  constructor() { }

  ngOnInit() {

    this.rating();

  }

  public rating(): void {

    this.stars = [];

    for (let i = 1; i <= 5; i++){

      this.stars.push(i > this.starsRating);

    }

  }

}

巴特西

Angular 星级评分组件

最新文章

热门文章