ionic4 星级评价

1.建立一个ionic项目

ionic start 项目名称

2.安装依赖

使用ctrl+c退出当前安装，然后cd到所建立的项目，安装依赖

cd 刚刚创建的项目名称
cnpm install

3.新建star-rating组件

 ionic g component home/star-rating

4.安装星级评价插件

npm i ionic3-star-rating

5.编写star-ratingcomponent代码

HTML

<div class="ionic3-star-rating">
  <button *ngFor="let index of [0,1,2,3,4]" id="{{index}}" type="button" ion-button icon-only
    (click)="changeRating($event)">
    <ion-icon [ngStyle]="{'color':index < this.Math.round(this.parseFloat(rating)) ? activeColor : defaultColor, 'font-size': size }"
      name="{{index < this.Math.round(this.parseFloat(rating)) ? activeIcon : defaultIcon}}"></ion-icon>
  </button>
</div>

scss

.ionic3-star-rating{
  button {
    background-color: white;
    ion-icon {
      font-size: 1.3rem;
    }
  }
}

ts

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

@Component({
  selector: 'app-star-rating',
  templateUrl: './star-rating.component.html',
  styleUrls: ['./star-rating.component.scss'],
})
export class StarRatingComponent implements OnInit {

  @Input()
  rating: number = 3; //设置星级的初始值
  @Input()
  readonly: string = "false"; 
  @Input()
  activeColor: string = '#488aff'; //颜色
  @Input()
  defaultColor: string = '#f4f4f4'; //颜色
  @Input()
  activeIcon: string = 'ios-star'; //图标
  @Input()
  defaultIcon: string = 'ios-star-outline'; //图标
  @Input()
  size: string = '1.3rem'; //大小
  Math: any;
  parseFloat : any;

  constructor(private events : Events) {
    this.Math = Math;
    this.parseFloat = parseFloat;
  }

  changeRating(event){

    if(this.readonly && this.readonly === "true") return;
    this.rating = event.target.id ? parseInt(event.target.id) + 1 : parseInt(event.target.parentElement.id) + 1;
    // subscribe this event to get the changed value in ypour parent compoanent 
    this.events.publish('star-rating:changed', this.rating);
  }

  ngOnInit() {}

}

6.编写home页面

home.module.ts

html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Star Rating
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <app-star-rating 
    [rating]="rating" 
    activeColor="#ff3300" 
    defaultColor="#f4f4f4" 
    activeIcon="ios-star" 
    defaultIcon="ios-star-outline" 
    size="2rem"
  ></app-star-rating>

  <p>rating: {{ rating }}</p>
</ion-content>

home.page.ts

import { Component, OnInit } from '@angular/core';    //引入模块
import { Events} from '@ionic/angular'; //引入模块

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  rating = 3;

  constructor(private events: Events) { }    //构造函数初始化

  ngOnInit() {
    this.events.subscribe('star-rating:changed', starRating => this.rating = starRating);    //添加star-rating中的事件
  }
}