Angular项目中星级评分点击持久变色功能实现求助

针对你已实现hover变色效果，需要点击后在浏览器会话中永久保留选中状态的需求，可通过以下步骤修改代码：

1. 组件类（.ts）修改 #

添加状态变量并结合sessionStorage实现状态持久化：

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

@Component({
  selector: 'app-star-rating',
  templateUrl: './star-rating.component.html',
  styleUrls: ['./star-rating.component.scss']
})
export class StarRatingComponent implements OnInit {
  starsArray: boolean[] = new Array(5);
  selectedStarIndex: number | null = null;

  ngOnInit(): void {
    // 页面初始化时从会话存储恢复选中状态
    const savedIndex = sessionStorage.getItem('selectedStarIndex');
    if (savedIndex) {
      this.selectedStarIndex = parseInt(savedIndex, 10);
    }
  }

  onStarClick(index: number): void {
    this.selectedStarIndex = index;
    // 将选中索引存入会话存储，刷新页面后仍保留
    sessionStorage.setItem('selectedStarIndex', index.toString());
  }
}

2. 模板（.html）修改 #

绑定点击事件和高亮类：

<div class="stars-container mt-2">
  <div *ngFor="let star of starsArray; let i = index" 
       class="star" 
       [class.highlighted]="selectedStarIndex === i"
       (click)="onStarClick(i)">
    <svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24">
      <path fill="#ffffff"
            d="m7.69 19.346l1.614-5.33L5.115 11h5.216L12 5.462L13.67 11h5.215l-4.189 3.015l1.614 5.331L12 16.07z" />
    </svg>
  </div>
</div>

3. 可选：支持取消选中 #

若需要再次点击同一颗星取消选中状态，修改点击事件函数：

onStarClick(index: number): void {
  // 再次点击则切换选中/取消状态
  this.selectedStarIndex = this.selectedStarIndex === index ? null : index;
  
  if (this.selectedStarIndex === null) {
    sessionStorage.removeItem('selectedStarIndex');
  } else {
    sessionStorage.setItem('selectedStarIndex', index.toString());
  }
}

原理说明 #

• 利用selectedStarIndex记录被点击星星的DOM索引
• 通过sessionStorage存储索引值，确保浏览器会话内（页面刷新、跳转后返回）状态不会丢失
• 你的SCSS代码已通过.star.highlighted ~ .star选择器实现了"点击星星后左侧所有星星同步高亮"的逻辑，只需给目标星星添加highlighted类即可触发该效果

内容的提问来源于stack exchange，提问作者carloslopez