Angular+ionic评分组件的引用

一，封装组件

1，rating-star.component.html中

<div class="rating_container">
<ng-container *ngFor="let num of [1, 2, 3, 4, 5]">
<ion-icon name="star" *ngIf="num<=rating;else:Half" color="warning" (click)="changeNum(num)" [ngClass]="{'mar': isClick}"></ion-icon>
<ng-template #Half>
<ion-icon name="star-half" *ngIf="num-1<rating;else:Outline" color="warning" (click)="changeNum(num)"  [ngClass]="{'mar': isClick}"></ion-icon>
<ng-template #Outline>
<ion-icon name="star-outline" color="medium" (click)="changeNum(num)"  [ngClass]="{'mar': isClick}"></ion-icon>
</ng-template>
</ng-template>
</ng-container>
</div>

2，rating-star.component.css中

@import "../../../../style/mixin.scss";
.rating_container {
display: flex;
align-items: center;
ion-icon {
font-size: rem(28);
}
.mar{
margin: 0 rem(5);
font-size: rem(24);
background-color:#007AFF;
}
}

3，rating-star.component.ts中

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

@Component({
selector: 'app-rating-star',
templateUrl: './rating-star.component.html',
styleUrls: ['./rating-star.component.scss'],
})
export class RatingStarComponent implements OnInit {
@Input() rating: number;
@Input() isClick = false;
constructor() { }
ngOnInit() {}
changeNum(num) {
if (!this.isClick) {
return;
}
if (num !== this.rating) {
this.rating = num;
} else {
this.rating = num - 0.5;
}

}
}

二，组件放置位置

三，页面中引用组件

1，product-details.module.ts引入

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { ProductDetailsPageRoutingModule } from './product-details-routing.module';

import { ProductDetailsPage } from './product-details.page';
import { ShareModule } from '../../share/share.module';//引入评分组件模块
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
ProductDetailsPageRoutingModule,
ShareModule//使用评分组件模块
],
declarations: [ProductDetailsPage]
})
export class ProductDetailsPageModule {}

2，html引入

<app-rating-star [rating]="getComments.totalNum"></app-rating-star>

四，效果图