Question

我如何在离子3中创建5星评级，我访问了https://github.com/andrucz/ionic2-rating，但是它不起作用。还请阅读一些教程，但没有发现任何离子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)});
  }

}

如何在Ionic 3中实施评级？

1 个答案: