Angular可复用星级评分组件多次使用时仅最后一个生效问题

你遇到的核心问题是：组件内使用了全局DOM选择器（如document.getElementById）或共享了重复的ID，导致所有循环生成的组件实例都操作了最后一个DOM元素。单次使用时只有一个组件实例，所以没问题；但*ngFor循环会生成多个实例，重复的ID会让全局选择器只返回最后一个匹配的元素，最终只有最后一个组件能正确渲染高亮。

错误示例（导致问题的常见写法） #

如果你的组件代码类似下面这样，就会触发这个问题：

组件模板（star-rating.component.html）

<div class="stars">
  <span id="star1" class="star">★</span>
  <span id="star2" class="star">★</span>
  <span id="star3" class="star">★</span>
  <span id="star4" class="star">★</span>
  <span id="star5" class="star">★</span>
</div>

组件类（star-rating.component.ts）

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

@Component({
  selector: 'app-star-rating',
  templateUrl: './star-rating.component.html',
  styleUrls: ['./star-rating.component.css']
})
export class StarRatingComponent implements OnInit {
  @Input() starrating: number = 0;

  ngOnInit() {
    // 错误：全局选择器会找到文档中最后一个匹配ID的元素
    for (let i = 1; i <= this.starrating; i++) {
      const star = document.getElementById(`star${i}`);
      if (star) star.classList.add('highlighted');
    }
  }
}

正确解决方案：用Angular数据绑定替代DOM操作 #

Angular推荐通过数据绑定控制视图，避免直接操作全局DOM，这样每个组件实例会独立维护自己的状态。

1. 修正后的组件模板

<div class="stars">
  <!-- 通过*ngFor生成星星，用ngClass根据索引判断是否高亮 -->
  <span *ngFor="let _ of [1,2,3,4,5]; let i = index"
        class="star"
        [ngClass]="{'highlighted': i < starrating}">
    ★
  </span>
</div>

2. 简化后的组件类

import { Input } from '@angular/core';

@Component({
  selector: 'app-star-rating',
  templateUrl: './star-rating.component.html',
  styleUrls: ['./star-rating.component.css']
})
export class StarRatingComponent {
  @Input() starrating: number = 0;
}

3. 配套CSS

.star {
  color: #ccc;
  font-size: 20px;
  cursor: default;
}
.star.highlighted {
  color: #ffc107;
}

备选方案：用ViewChild操作组件内部DOM（不推荐，仅作参考） #

如果必须手动操作DOM，要确保只操作当前组件实例内部的元素，而非全局DOM：

组件模板

<div class="stars" #starContainer>
  <span class="star">★</span>
  <span class="star">★</span>
  <span class="star">★</span>
  <span class="star">★</span>
  <span class="star">★</span>
</div>

组件类

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

@Component({
  selector: 'app-star-rating',
  templateUrl: './star-rating.component.html',
  styleUrls: ['./star-rating.component.css']
})
export class StarRatingComponent implements OnInit {
  @Input() starrating: number = 0;
  @ViewChild('starContainer') starContainer!: ElementRef;

  ngOnInit() {
    // 只获取当前组件内的星星元素
    const stars = this.starContainer.nativeElement.querySelectorAll('.star');
    for (let i = 0; i < this.starrating; i++) {
      if (stars[i]) stars[i].classList.add('highlighted');
    }
  }
}

父组件使用方式（无需修改） #

<div *ngFor="let item of ratingList">
  <p>{{item.title}}</p>
  <app-star-rating [starrating]="item.rating"></app-star-rating>
</div>

// 父组件类示例
ratingList = [
  { title: '对象1', rating: 3 },
  { title: '对象2', rating: 1 },
  { title: '对象3', rating: 2 }
];

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