本文详解如何在 angular 项目中构建一个交互式五星评分组件，支持鼠标悬停高亮、点击选中左侧连续星星，并将评分状态保留在当前浏览器会话中（无需后端存储）。
本文详解如何在 angular 项目中构建一个交互式五星评分组件，支持鼠标悬停高亮、点击选中左侧连续星星，并将评分状态保留在当前浏览器会话中（无需后端存储）。
在 Angular 应用中实现直观、响应式的星级评分功能，关键在于解耦视觉状态（星标高亮）与业务状态（用户选择的分数），同时确保交互逻辑符合用户直觉——即点击某颗星时，该星及其左侧所有星均被选中（例如点击第3颗星，表示评3分，对应前3颗星高亮）。
由于原始代码采用 flex-direction: row-reverse 实现右对齐布局（最右为第1星），视觉顺序与数组索引相反，因此需注意：starsArray[i] 对应的是从右往左数的第 i+1 颗星。为统一语义，我们定义 rating 表示用户最终选择的分数（1–5），并在模板中通过 5 - rating <= i 判断是否应添加 selected 类——该表达式确保当 rating = 3 时，索引 i ≥ 2（即右侧第1、2、3颗星）被标记为选中，视觉上呈现为左侧3颗星高亮。
以下是完整、可复用的 StarRatingComponent 实现：
import { CommonModule } from '@angular/common';
import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'app-star-rating',
standalone: true,
template: `
<div class="stars-container mt-2">
<div
*ngFor="let star of starsArray; let i = index"
class="star"
(click)="selectRating(i)"
[ngClass]="{ 'selected': 5 - rating <= i }"
>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="currentColor" 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>
`,
styles: `
.stars-container {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 0.7rem;
cursor: pointer;
flex-direction: row-reverse; /* 使最右星为第1颗 */
}
.star {
transition: transform 0.2s ease;
}
.star:hover, .star.selected {
transform: scale(1.1);
}
.star svg {
width: 2.5rem;
height: auto;
display: block;
}
.star svg path {
fill: #ccc;
transition: fill 0.3s ease;
}
/* 悬停时：当前星 + 左侧所有星高亮 */
.star:hover svg path,
.star:hover ~ .star svg path,
.star.selected svg path,
.star.selected ~ .star svg path {
fill: #ffc107;
}
`,
imports: [CommonModule],
})
export class StarRatingComponent {
@Input() rating: number = 0; // 当前评分（1-5）
@Output() ratingChange = new EventEmitter<number>(); // 评分变更事件
starsArray: boolean[] = Array(5).fill(false); // 仅用于循环，不存状态
selectRating(index: number): void {
const selectedRating = 5 - index; // 将索引映射为实际评分（右→左：1→5）
this.rating = selectedRating;
this.ratingChange.emit(selectedRating);
}
}使用方式（父组件中）
<app-star-rating [rating]="userRating" (ratingChange)="onRatingChanged($event)"> </app-star-rating>
export class ParentComponent {
userRating = 0;
onRatingChanged(rating: number): void {
this.userRating = rating;
console.log('当前评分:', rating); // 例如：点击第2颗星 → 输出 2
}
}关键设计说明：
- ✅ 状态管理：rating 作为输入属性，由父组件控制，确保单向数据流；点击触发 ratingChange 事件通知父组件更新。
- ✅ 视觉一致性：利用 CSS ~（后续兄弟选择器）配合 row-reverse，天然支持“点击某星，其右侧（视觉左侧）全部高亮”的效果。
- ✅ 会话级持久化：因 rating 存于组件实例或父组件内存中，页面未刷新即保持状态；如需跨页面保留，可结合 sessionStorage 扩展（例如在 ngOnChanges 中读写）。
- ⚠️ 注意事项：避免直接操作 starsArray 布尔值来存状态——它仅作结构占位符；真实状态由 rating 单一数据源驱动，符合 Angular 最佳实践。
通过此方案，你获得了一个轻量、可组合、符合无障碍标准（可添加 aria-label 进一步增强）的星级评分控件，开箱即用且易于定制主题与行为。
