Angular中Ag-Grid侧边栏headerName自定义翻译方案问询

针对你遇到的AgGrid侧边栏列标签无法跟随语言切换翻译的问题，这里提供两种集中化、可复用的解决方案，和你已有的表头翻译逻辑保持一致：

方案1：自定义侧边栏列项组件（推荐） #

通过自定义AgGrid列选择面板的列项渲染组件，直接复用Transloco管道翻译列定义中的headerName翻译key，实现语言切换时自动更新。

步骤1：创建自定义列项组件 #

import { Component } from '@angular/core';
import { IColumnChooserItemAngularComp } from 'ag-grid-angular';
import { IColumnChooserItemParams } from 'ag-grid-community';
import { TranslocoPipe } from '@ngneat/transloco';

@Component({
  selector: 'lrr-grid-translate-column-item',
  template: `<span>{{ params.column.getColDef().headerName | transloco }}</span>`,
  standalone: true,
  imports: [TranslocoPipe],
})
export class GridTranslateColumnItemComponent implements IColumnChooserItemAngularComp {
  params!: IColumnChooserItemParams;

  agInit(params: IColumnChooserItemParams): void {
    this.params = params;
  }

  refresh(params: IColumnChooserItemParams): boolean {
    this.params = params;
    return true;
  }
}

步骤2：配置AgGrid使用自定义组件 #

在你的表格组件中，配置gridOptions指定侧边栏的列项组件，并注册自定义组件：

import { GridOptions } from 'ag-grid-community';
import { TranslocoService } from '@ngneat/transloco';

constructor(private translocoService: TranslocoService) {}

gridOptions: GridOptions = {
  // 注册自定义组件
  frameworkComponents: {
    'lrr-grid-translate-column-item': GridTranslateColumnItemComponent,
  },
  // 配置侧边栏
  sidebar: {
    toolPanels: [
      {
        id: 'columns',
        toolPanel: 'agColumnsToolPanel',
        toolPanelParams: {
          columnChooserParams: {
            // 指定列项使用自定义组件
            itemComponent: 'lrr-grid-translate-column-item',
          },
        },
      },
    ],
  },
};

// 语言切换时刷新侧边栏（确保组件更新）
ngOnInit() {
  this.translocoService.langChanges$.subscribe(() => {
    this.gridApi?.refreshToolPanel();
  });
}

方案2：动态更新列定义的显示文本 #

如果不想自定义组件，可以通过监听语言变化，实时将列定义中的headerName翻译key替换为当前语言的翻译值，再重新设置列定义：

实现代码 #

import { TranslocoService } from '@ngneat/transloco';

// 原始列定义（headerName为翻译key）
originalColumnDefs = [
  {
    field: 'createdDate',
    headerName: 'common.createdDate',
    filter: 'agDateColumnFilter',
    headerComponentParams: {
      innerHeaderComponent: GridTranslateHeaderComponent,
    },
    valueFormatter: gridDateFormatter,
  },
  // 其他列...
];

constructor(private translocoService: TranslocoService) {}

ngOnInit() {
  // 初始化时翻译列名
  this.updateColumnHeaders();
  // 监听语言变化，实时更新
  this.translocoService.langChanges$.subscribe(() => {
    this.updateColumnHeaders();
  });
}

private updateColumnHeaders() {
  const translatedColumns = this.originalColumnDefs.map(col => ({
    ...col,
    // 翻译headerName
    headerName: this.translocoService.translate(col.headerName),
  }));
  this.gridApi?.setColumnDefs(translatedColumns);
}

注意：此方案需要确保表头自定义组件的refresh方法能正确处理已翻译的displayName（如果你的表头组件是直接翻译displayName，则需要调整逻辑，避免重复翻译）。

两种方案都能实现和表头一致的集中化翻译逻辑，方案1更贴合AgGrid的组件化设计，且无需修改现有表头逻辑，推荐使用。

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