feat: new comp-ratio-star

src/app/app-routing.module.ts

@@ -1,19 +1,20 @@
-import { NgModule } from '@angular/core';
-import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
-
-const routes: Routes = [
-  {
-    path: '',
-    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
-  },
-  {
-    path: 'user',
-    loadChildren: () => import('../modules/user/user.module').then(m => m.UserModule)
-  },
-  {
-    path: 'aigc',
-    loadChildren: () => import('../modules/aigc/aigc.module').then(m => m.AigcModule)
-  },
  {
+import { NgModule } from '@angular/core';
+import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+  {
+    path: '',
+    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
+  },
+  {
+    path: 'user',
+    loadChildren: () => import('../modules/user/user.module').then(m => m.UserModule)
+  },
+  {
+    path: 'aigc',
+    loadChildren: () => import('../modules/aigc/aigc.module').then(m => m.AigcModule)
+  },
+  {
     path: 'tsdatatype',
     loadChildren: () => import('./tsdatatype/tsdatatype.module').then( m => m.TsdatatypePageModule)
   },
@@ -25,12 +26,11 @@ const routes: Routes = [
     path: 'case-edit',
     loadChildren: () => import('./case-edit/case-edit.module').then( m => m.CaseEditPageModule)
   }
-
-];
-@NgModule({
-  imports: [
-    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
-  ],
-  exports: [RouterModule]
-})
-export class AppRoutingModule {}
+];
+@NgModule({
+  imports: [
+    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
+  ],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}

src/app/case-edit/case-edit.module.ts

@@ -7,13 +7,15 @@ import { IonicModule } from '@ionic/angular';
 import { CaseEditPageRoutingModule } from './case-edit-routing.module';
 
 import { CaseEditPage } from './case-edit.page';
+import { EditRatioStarComponent } from '../edit-ratio-star/edit-ratio-star.component';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
-    CaseEditPageRoutingModule
+    CaseEditPageRoutingModule,
+    EditRatioStarComponent
   ],
   declarations: [CaseEditPage]
 })

src/app/case-edit/case-edit.page.html

@@ -11,6 +11,18 @@
     </ion-toolbar>
   </ion-header>
 
+  <ion-card>
+    <ion-item>
+      星星打分:<app-edit-ratio-star [value]="score" (onValueChange)="score = $event"></app-edit-ratio-star>
+    </ion-item>
+    <ion-item>
+      图标打分:<app-edit-ratio-star color="blue" fillIcon="home" emptyIcon="home-outline" [value]="score" (onValueChange)="score = $event"></app-edit-ratio-star>
+    </ion-item>
+    <ion-item>
+      <ion-input type="number" [(ngModel)]="score"></ion-input>
+    </ion-item>
+  </ion-card>
+
   <ion-card>
     <ion-item>
       已输入用户名:{{username}}

src/app/case-edit/case-edit.page.ts

@@ -18,6 +18,7 @@ export class CaseEditPage implements OnInit {
     age:18,
     birthday:new Date()
   }
+  score:number = 4;
   onUserNameInput(ev:Event|any){
     console.log(ev)
     this.username = ev?.target?.value;

src/app/edit-ratio-star/README.md

@@ -0,0 +1,32 @@
+# 组件:星星打分组件
+
+# 组件结构描述
+- 基本功能:用户可以引入该组件,绑定在number类型的属性上,实现用户选择星星,就能返回对应星级的数字.
+- 页面模板
+    - 横向的多颗行星列表
+        - 根据starCheckList进行循环,显示满星和空星
+    - 星星用ion-icon字体图标表示
+- 常量属性
+    - starCheckList:Array<boolean> 星星选择的数组
+        - [true,true,false,false,falce] 表示两颗满星 三颗空星
+- 输入属性
+    - value:number 默认 0
+    - maxValue:number default 5 默认5颗星
+- 输出事件
+    - onValueChange 事件 返回number类型 组件内选择的星星分数
+- 逻辑函数
+    - 初始化函数
+        - 根据value和maxValue的值,分别计算空星星数量和满星星数量,生成starCheckList
+    - 星星选择函数
+        - 根据星星所在位置,给value分数赋值,并且重新生成星星数组.
+        - 将value的值通过onValueChange事件进行发送
+
+# 组件开发:人工实现
+``` bash
+ionic g component edit-ratio-star --standalone
+```
+
+# 思考题目
+- 问题1:如何实现当满星被再次点击时候,分值设置为0?
+- 问题2:如何实现不用星星做标识,换成笑脸?
+- 问题3:如何实现图标颜色的用户自定义?

src/app/edit-ratio-star/edit-ratio-star.component.html

@@ -0,0 +1,3 @@
+<div class="list">
+  <ion-icon [style.color]="color" (click)="onStarClick(index)" [name]="checked?fillIcon:emptyIcon" *ngFor="let checked of starCheckList;let index=index;"></ion-icon>
+</div>

src/app/edit-ratio-star/edit-ratio-star.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { EditRatioStarComponent } from './edit-ratio-star.component';
+
+describe('EditRatioStarComponent', () => {
+  let component: EditRatioStarComponent;
+  let fixture: ComponentFixture<EditRatioStarComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [EditRatioStarComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(EditRatioStarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/edit-ratio-star/edit-ratio-star.component.ts

@@ -0,0 +1,61 @@
+import { NgForOf } from '@angular/common';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { IonIcon } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-edit-ratio-star',
+  templateUrl: './edit-ratio-star.component.html',
+  styleUrls: ['./edit-ratio-star.component.scss'],
+  standalone: true,
+  imports:[
+    IonIcon,NgForOf
+  ]
+})
+export class EditRatioStarComponent  implements OnInit {
+
+  @Input()
+  fillIcon:string = "star"
+  @Input()
+  emptyIcon:string = "star-outline"
+  @Input()
+  color:string = "#FFFF00"
+
+  @Input()
+  value:number = 2;
+  @Output()
+  onValueChange:EventEmitter<number> = new EventEmitter<number>
+
+  maxValue:number = 10;
+  starCheckList:Array<boolean> = []
+  constructor() {
+   }
+
+  ngOnInit() {
+    this.makeStarList()
+  }
+
+  onStarClick(index:number){
+    let score = index + 1
+
+    if(score==this.value){ // 点原星星,设置0分
+      this.value = 0
+    }else{ // 根据星星位置,设置分数
+      this.value = score;
+    }
+
+    this.makeStarList();
+    this.onValueChange.emit(this.value)
+  }
+  makeStarList(){
+    let starList = []
+    for (let index = 0; index < this.value; index++) {
+      starList.push(true)
+    }
+    let leftCount = this.maxValue - this.value
+    for (let index = 0; index < leftCount; index++) {
+      starList.push(false)
+    }
+    this.starCheckList = starList
+  }
+
+}