Как реализовать рейтинг в ионном 3?

Question

Как мне создать 5-звездочный рейтинг в ionic 3, я посетил 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-компонент рейтинга на вашей странице (родительский компонент) выглядит следующим образом:

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

Шаг 2. Вам необходимо импортировать StarRatingModule в module.ts вашего родительского компонента следующим образом

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)});
  }

}