Angular 8中实现<th>排他选中背景色切换的问题

我来帮你搞定这个元素点击选中的背景色控制问题！你的需求是：点击一个时它保持绿色背景，点击其他时取消之前选中项的背景色，重复点击同一个则保持选中状态对吧？咱们来一步步修改你的指令代码：

关键问题分析 #

原代码的问题在于每次点击只给当前设置背景色，没有处理其他兄弟的重置逻辑，而且用了已经废弃的Renderer（Angular 4+之后官方推荐用Renderer2）。

修改后的完整代码 #

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

@Directive({ selector: '[sortColumn]' }) 
export class SortDirective implements OnInit { 
  @Input() data: any; 
  @Input('sortKey') key: any; 
  @Input('sortNumber') num: number; 
  private toggleSort: boolean = false; // 如果需要切换排序方向，这个变量可以保留

  constructor(
    private el: ElementRef, 
    private renderer: Renderer2 // 替换为Renderer2，Renderer已废弃
  ) { } 

  ngOnInit() { 
    this.renderer.listen(this.el.nativeElement, 'click', (event) => { 
      // 保留你原有的排序逻辑
      if (this.data && this.key) { 
        let sortedData: any = this.sortArray(); 
      } 
      if (this.data && this.num) { 
        let sortedData: any = this.sortNums() 
      } 

      // 处理背景色选中逻辑
      const parentNode = this.el.nativeElement.parentNode;
      // 将父元素的子节点转为数组，方便遍历所有<th>
      const allThElements = Array.from(parentNode.children);

      // 重置所有非当前点击<th>的背景色为默认（这里用transparent，你可以改成你需要的默认色）
      allThElements.forEach(th => {
        if (th !== this.el.nativeElement) {
          this.renderer.setStyle(th, 'background-color', 'transparent');
        }
      });

      // 设置当前点击<th>的背景色为选中状态
      this.renderer.setStyle(this.el.nativeElement, 'background-color', 'green');
    }) 
  } 

  // 保留你原有的sortArray和sortNums方法
  private sortArray() {
    // 你的排序逻辑...
  }

  private sortNums() {
    // 你的数字排序逻辑...
  }
}

核心修改点说明 #

1. 替换Renderer为Renderer2：Angular 8中Renderer已经被废弃，Renderer2是官方推荐的替代方案，API用法更规范。
2. 重置兄弟元素背景色：点击时先遍历当前的所有兄弟元素，把不是当前点击的元素背景色重置为默认值，确保只有一个处于选中状态。
3. 保持当前元素选中状态：不管是不是重复点击同一个，都会给它设置选中背景色，满足“点击同一个保持选中，直到切换到其他才取消”的需求。

如果你的默认背景色不是transparent，可以把代码里的transparent改成你实际使用的颜色（比如white或者你表格的原始背景色）。

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