【问题标题】：AG-Grid: Translate headerName with ngx-translate (angular)AG-Grid：使用 ngx-translate（角度）翻译 headerName
【发布时间】：2019-03-08 20:10:42
【问题描述】：

我们正在使用 Angular 来可视化 AG 网格。我们希望将 ag 网格的标题翻译成用户的语言。

银格代码：

<ag-grid-angular class="ag-theme-material" [rowData]="productionOrders">
  <ag-grid-column [headerName]="'ORDERS.GRID.EntryCode' | translate" field="entry"></ag-grid-column>
  <ag-grid-column [headerName]="ORDERS.GRID.EntryDescription" field="entryDescription"></ag-grid-column>
</ag-grid-angular>

我们可以用同样的方式在我们的 html 页面上翻译一个值：

<span>{{ 'ORDERS.Status' | translate}}</span>

我注意到，在加载翻译时，ag grid 不会注意到翻译何时加载。然而，html 页面本身的值会被翻译。

额外信息：ngx-translate 的翻译管道是一个“不纯”管道，这意味着它的值可以改变（例如，当所有翻译都加载时）

同样，当使用没有翻译的 headerName 时，它不会得到更新：

银格代码：

<ag-grid-angular class="ag-theme-material" [rowData]="productionOrders">
  <ag-grid-column [headerName]="bindedString" field="entry"></ag-grid-column>
</ag-grid-angular>

this.lazyString = 'test-1';
setTimeout(() => {
  this.lazyString = 'test-2';
}, 3000);

标题名称永远不会更新为“test-2”

【问题讨论】：

你是否将“翻译”管道导入到 moudle.ts 中？如果你不确定你可以看看这个视频：youtube.com/watch?v=Ara2cQ4IQxA
是的，我也在同一页面上使用翻译管道，所以应该没问题。

标签： angular typescript ag-grid

【解决方案1】：

demo.component.html

<ag-grid-angular style="width: 100%; height: 100%;" class="ag-theme-material" [rowData]="rowData"
    [columnDefs]="columnDefs" (gridReady)="onGridReady($event)" [pagination]="true">
</ag-grid-angular>

demo.component.ts

import { Component } from '@angular/core';
import { ColDef, GridApi } from 'ag-grid-community';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.scss']
})
export class DemoComponent {
  private gridApi: GridApi = null;

  public columnDefs: ColDef[] = [
    { headerName: "Code", field: 'code', sortable: true, resizable: true, headerValueGetter: this.localizeHeader.bind(this) },
    { headerName: 'Version', field: 'version', sortable: true, resizable: true, headerValueGetter: this.localizeHeader.bind(this) },
    { headerName: 'IsEnabled', field: 'isEnabled', sortable: true, resizable: true, headerValueGetter: this.localizeHeader.bind(this) }
  ];

  public rowData: any[] = [];

  constructor(private translateService: TranslateService) {
    this.translateService.onLangChange.subscribe(() => {
      this.gridApi.refreshHeader();
    })
  }

  public onGridReady(parameters: any): void {
    this.gridApi = parameters.api;
  }

  public localizeHeader(parameters: ICellRendererParams): string {
    let headerIdentifier = parameters.colDef.field;
    return this.translateService.instant(headerIdentifier);
  }
}

【讨论】：

【解决方案2】：

Header Value Getters

使用headerValueGetter 而不是colDef.headerName 以允许动态标题名称。

private translator: TranslateService;
...
colDef.headerValueGetter : this.localizeHeader.bind(this)
....
localizeHeader(params){
    let headerIdentifier = params.colDef.field; // params.column.getColId();
    this.translator.get(headerIdentifier).map((res: string) => {
        return res;
    });
}

Sample from doc

{ 
    headerName: "Country", 
    field: "country", 
    width: 120, 
    enableRowGroup: true, 
    enablePivot: true, 
    headerValueGetter: countryHeaderValueGetter 
},

function countryHeaderValueGetter(params) {
    switch (params.location) {
        case 'csv': return 'CSV Country';
        case 'clipboard': return 'CLIP Country';
        case 'toolPanel': return 'TP Country';
        case 'columnDrop': return 'CD Country';
        case 'header': return 'H Country';
        default: return 'Should never happen!';
    }
}

【讨论】：

它（我使用它的方式有点不同。我在 html markdown 中使用 ag 网格。<ag-grid-column headerName="ORDERS.GRID.EntryDescription" [headerValueGetter]="translateHeaderValue" field="entryDescription"></ag-grid-column> 所以在打字稿中就像这样translateHeaderValue(params) { params.context.translateService.get(params.colDef.headerName).pipe(map((res: string) => { console.log(res); return res; })); } 但我的控制台日志'res'从来没有被击中备注：我需要在地图前使用管道，否则我会遇到错误地图不是函数。
这里有同样的问题，似乎翻译方法是异步的，响应回调永远不会被踢。有人找到解决方案了吗？

【解决方案3】：

如果您想使用 TurboYang 的异步翻译加载解决方案，只需添加以下内容：

  private destroy = new Subject<void>();

  constructor(private toastService: ToastService, private translate: TranslateService) {
    translate.onLangChange.pipe(takeUntil(this.destroy)).subscribe(() => {
      this.gridApi.refreshHeader();
    });
    translate.onDefaultLangChange.pipe(takeUntil(this.destroy)).subscribe(() => {
      this.gridApi.refreshHeader();
    });
  }

  ngOnDestroy(): void {
    this.destroy.next();
    this.destroy.complete();
  }

【讨论】：