ag-grid-angular如何在单个表头单元格中设置两种文字颜色

ag-grid-angular的headerName属性默认仅支持纯文本渲染，会自动转义HTML内容，无法直接给拼接的部分字段单独设置样式，可通过以下两种方式实现需求，根据场景选择即可。

方法1：轻量实现（无额外组件，适合纯样式调整场景） #

直接在列配置中使用headerCellRenderer自定义表头渲染逻辑，不需要单独编写Angular组件，代码改动最小：

empData = [
  {
    width: 39,
    // 移除原有纯文本拼接的headerName配置，改用渲染函数
    headerCellRenderer: () => {
      const container = document.createElement('span');
      // 插入默认颜色的固定文本
      container.append('Department Id ');
      // 单独创建deptId的元素，设置红色样式
      const idEle = document.createElement('span');
      idEle.style.color = 'red';
      idEle.textContent = String(this.deptId);
      container.append(idEle);
      return container;
    }
  },
  { headerName: 'Name', width: 39 }
];

注意：该写法不会影响表头原有排序、筛选、列拖拽等内置功能的正常使用。

方法2：自定义Angular表头组件（适合后续有交互扩展的场景） #

如果后续该列头需要添加点击事件、tooltip等复杂逻辑，可编写独立的表头组件实现：

1. 新建自定义表头组件

// dept-header.component.ts
import { Component } from '@angular/core';
import { IHeaderAngularComp } from 'ag-grid-angular';

@Component({
  selector: 'app-dept-header',
  template: `<span>Department Id <span style="color: red">{{ deptId }}</span></span>`
})
export class DeptHeaderComponent implements IHeaderAngularComp {
  deptId!: string | number;

  agInit(params: { deptId: string | number }): void {
    this.deptId = params.deptId;
  }

  refresh(params: { deptId: string | number }): boolean {
    this.deptId = params.deptId;
    return true;
  }
}

2. 在所属模块声明该组件后，修改列配置引用组件：

import { DeptHeaderComponent } from './dept-header.component';

empData = [
  {
    width: 39,
    headerComponent: DeptHeaderComponent,
    headerComponentParams: {
      deptId: this.deptId // 把动态ID值传给自定义表头
    }
  },
  { headerName: 'Name', width: 39 }
];

踩坑提示 #

不要尝试直接在headerName中拼接HTML字符串（比如<span style="color:red">这类写法），ag-grid默认会对headerName的内容做XSS转义，标签会被当成普通文本显示，样式不会生效。如果this.deptId存在动态更新的场景，值变更后需要调用grid实例的refreshHeader()方法触发表头重绘，保证显示内容同步。

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