[英]AG-Grid: Translate headerName with ngx-translate (angular)
我們使用 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 的翻譯 pipe 是一個“不純的”pipe,這意味着它的值可以改變(例如,當所有翻譯都被加載時)
同樣,當使用沒有翻譯的 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);
header 名稱永遠不會更新為“test-2”
<ag-grid-angular style="width: 100%; height: 100%;" class="ag-theme-material" [rowData]="rowData"
[columnDefs]="columnDefs" (gridReady)="onGridReady($event)" [pagination]="true">
</ag-grid-angular>
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);
}
}
使用
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;
});
}
{
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!';
}
}
如果您想使用帶有異步翻譯加載的 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();
}
Function 在職
getTr(key: string) {
return this.translate.instant(key);
}
ColumnDef 中的用法
{
field: 'name', headerName: this.trService.getTr('NAME')
},
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.