Angular中如何实现点击元素修改CSS并添加文本下划线效果

实现方案 #

推荐用Angular原生的类绑定功能实现，不需要手动操作DOM，性能和可维护性更好：

第一步：修改TS代码 #

// 新增变量存储当前选中的品牌索引
selectedBrandIndex: number | null = null;

onSelect(i: number) {
  // 如果点击的是当前已选中的项，就取消选中，否则更新选中索引
  this.selectedBrandIndex = this.selectedBrandIndex === i ? null : i;
}

第二步：修改HTML模板 #

直接通过类绑定动态添加selected类，不需要手动查DOM操作类名：

<li class="nav-item" *ngFor="let brand of brands; let i = index">
  <button 
    class="btn brand" 
    id="brand" 
    type="button" 
    data-toggle="showCategory" 
    aria-controls="tabOne"
    data-target="#tabOne" 
    href="#merk1" 
    [class.selected]="selectedBrandIndex === i"
    (click)="getCategories(brand.id); onSelect(i);"
  >
    <img [src]="brand.imageLink" width="100" height="40" [alt]="brand.name" role="button">
  </button>
</li>

第三步：添加对应CSS样式 #

注意：text-decoration属性仅作用于文本内容，按钮内只有图片的话不会显示下划线效果，推荐用border-bottom实现等效的下划线效果：

.btn.brand.selected {
  /* 如果按钮内有文字需要下划线可以保留下面这行 */
  /* text-decoration: underline; */
  /* 适配只有图片的场景，用边框模拟下划线 */
  border-bottom: 2px solid #333;
  /* 可以调整内边距避免下划线贴到图片 */
  padding-bottom: 4px;
}

原有代码问题说明 #

1. 手动通过document.getElementsByClassName查DOM的方式不符合Angular最佳实践，容易出现和视图不同步的问题
2. 直接判断完整类名字符串的逻辑非常脆弱，后续如果给按钮添加其他类名，判断逻辑会直接失效
3. 如果坚持要用Renderer2实现，也可以直接调用toggleClass方法简化逻辑，不需要手动判断类名：

onSelect(i: number) {
  const element = document.getElementsByClassName('brand')[i];
  this.renderer.toggleClass(element, 'selected');
}

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