本文介绍如何在 Angular 项目中构建一个支持鼠标悬停高亮与点击永久选中（会话级）的五星评分组件，通过 @Input/@Output 实现双向绑定，并利用 CSS 选择器动态控制左侧星标填充状态。
本文介绍如何在 angular 项目中构建一个支持鼠标悬停高亮与点击永久选中（会话级）的五星评分组件，通过 `@input`/`@output` 实现双向绑定，并利用 css 选择器动态控制左侧星标填充状态。
在 Angular 中实现交互式星级评分，关键在于将视觉反馈（hover）与用户操作（click）解耦，并通过状态驱动渲染。原始代码中仅实现了 hover 效果，但缺少点击后持久化选中状态的能力。下面我们将构建一个可复用、响应式且语义清晰的 StarRatingComponent。
✅ 核心设计思路
- 使用 *ngFor 渲染 5 颗星，索引 i 从 0 到 4；
- 因为布局设为 flex-direction: row-reverse（右对齐、反向排列），最右侧星对应索引 0，最左侧星对应索引 4；
- 用户点击第 i 颗星时，实际表示“选择 (5 - i) 星”（例如点击最右星 → i=0 → rating = 5）；
- 通过 [ngClass] 动态添加 .selected 类，结合 CSS 的 &.selected ~ .star 选择器，使被点击星及其左侧所有星均高亮；
- 使用 @Input() rating 接收当前评分值，@Output() ratingChange 向父组件广播变更，支持 [(rating)] 双向绑定。
? 完整组件代码（推荐使用 Standalone 方式）
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="128" height="128" viewBox="0 0 24 24">
<path
fill="{{ i < (5 - rating) ? '#ffd700' : '#9e9e9e' }}"
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;
}
.star {
transition: transform 0.2s ease;
}
.star:hover {
transform: scale(1.1);
}
.star svg path {
transition: fill 0.3s ease;
}
/* Hover effect: all stars to the *left* (in DOM order) of hovered star */
.star:hover ~ .star svg path,
.star:hover svg path {
fill: #ffd700 !important;
}
/* Selected state: apply gold fill to clicked star and all its left siblings */
.star.selected svg path,
.star.selected ~ .star svg path {
fill: #ffd700 !important;
}
/* Fallback for unselected stars */
.star:not(.selected) svg path {
fill: #9e9e9e;
}
`,
imports: [CommonModule],
})
export class StarRatingComponent {
@Input() rating: number = 0; // 0–5, 0 means no selection
@Output() ratingChange = new EventEmitter<number>();
readonly starsArray = Array(5).fill(null); // placeholder array for *ngFor
selectRating(i: number): void {
const newRating = 5 - i;
this.ratingChange.emit(newRating);
}
}? 使用方式（父组件）
<!-- parent.component.html -->
<app-star-rating [(rating)]="userRating"></app-star-rating>
<p>当前评分：{{ userRating }} 星</p>// parent.component.ts
export class ParentComponent {
userRating = 0; // 初始化为 0（未评分）
}⚠️ 注意事项与最佳实践
- CSS 优先级问题：.selected ~ .star svg path 和 :hover 规则可能冲突，建议统一使用 !important（如上例）或重构为纯类驱动逻辑，避免依赖 :hover 覆盖已选状态；
- 无障碍支持：生产环境应补充 aria-label 和键盘导航（如 Enter/Space 触发），可结合 @HostListener('keydown') 扩展；
- 空状态处理：rating = 0 表示未评分，此时所有星默认灰色；若需“半星”或“小数评分”，需改用 SVG 分割路径或引入更复杂渲染逻辑；
- 样式隔离：若使用 ViewEncapsulation.Emulated，确保 SCSS 中的嵌套选择器正确编译；Standalone 组件推荐内联 styles 或 styleUrls 以提升可维护性。
该方案轻量、可复用、无外部依赖，完美契合 Angular 响应式开发范式，适用于表单、评论、产品评分等多种场景。
