如何在离子3中实施评级？

Question

如何在 ionic 3 中创建 5 星评级，我访问了 https://github.com/andrucz/ionic2-rating 但它不起作用。还阅读了一些教程，但没有找到任何干净清晰的 ionic 3。 为清楚起见，我想获取评分值并显示评分。

任何帮助将不胜感激。 谢谢你

Answer 1

演示：https://stackblitz.com/edit/ionic3-star-rating

使用github.com/melwinVincent/ionic3-star-rating npm 包。

步骤 1. 在您的页面（父组件）中添加 ionic3-star-rating 组件，如下所示

<ionic3-star-rating 
    activeIcon = "ios-star"
    defaultIcon = "ios-star-outline"
    activeColor = "#488aff" 
    defaultColor = "#f4f4f4"
    readonly="false"
    [rating]="3">
</ionic3-star-rating>

第 2 步。 您必须在父组件的 module.ts 中导入 StarRatingModule，如下所示

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ParentPage } from './parent';
import { StarRatingModule } from 'ionic3-star-rating';

@NgModule({
declarations: [
    ParentPage,
],
imports: [
    StarRatingModule,
    IonicPageModule.forChild(ParentPage),
],
})
export class ParentPageModule {}

第 3 步。 要在父组件中获得更改后的评级， 您需要使用离子包中的events。

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Events } from 'ionic-angular';

@Component({
  selector: 'page-about',
  templateUrl: 'about.html'
})
export class AboutPage {

  constructor(public navCtrl: NavController,
  public events: Events) {
     events.subscribe('star-rating:changed', (starRating) => {console.log(starRating)});
  }

}