使用 ng2-translate 翻译 ag-grid-ng2 列 headers

Question

这可能是个愚蠢的问题，但我还是要问！

我正在学习如何使用 Angular2，作为我正在从事的项目的一部分，需要在英语和其他语言之间进行翻译。我找到了出色的 ng2-translate，它可以出色地使用翻译管道翻译 html 模板中的内容。

在站点的一部分中，有一个使用 ad-grid-ng2 创建的网格。列 defs 在打字稿组件中创建，并绑定到 HTML.

组件

export class ContactConnectionsComponent implements OnInit {
private connectionTypes: ConnectionType[];

private gridOptions: GridOptions = {};
private columnDefs = [
    { headerName: "Id", field: "id", hide: true },
    { headerName: "", field: "icon", cellRenderer: this.iconColumnRenderer, width: 32 },
    { headerName: "Type", field: "value", width: 100 },
    { headerName: this.translate.instant("Description"), field: "description", width: 400 }
]

constructor(
    public modal: Modal,
    private connectionTypesService: ConnectionTypesService,
    private cultureService: CultureService,
    private route: ActivatedRoute,
    private router: Router,
    private translate: TranslateService
) {

}



ngOnInit() {
    this.getConnectionTypes();
    this.translate.addLangs(["en", "fr"]);
    this.translate.setDefaultLang('en');

    let browserLang = this.translate.getBrowserLang();
    this.translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
}
// omitted to save space
}

html

<div class="animated fadeIn">
<span defaultOverlayTarget></span>
<select #langSelect (change)="translate.use(langSelect.value)">
    <option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">{{ lang }}</option>
</select>
<div class="card">
    <div>
        <div class="card-header">
            <h6>{{ 'ContactConnections' | translate }}</h6>
            <div class="btn-toolbar" align="right">
                <button class="btn btn-secondary" type="button" (click)="newConnectionType()"><i class="fa fa-star"></i>&nbsp; {{ 'Add' }}</button>
                <button class="btn btn-secondary" type="button" (click)="editConnectionType()" [disabled]="!isRowSelected"><i class="fa fa-edit"></i>&nbsp; {{ 'Edit' | translate }}</button>
                <button class="btn btn-secondary" type="button" (click)="deleteConnectionType()" [disabled]="!isRowSelected"><i class="fa fa-trash"></i>&nbsp; {{ 'Delete' }}</button>
            </div>
        </div>
    </div>

    <br />
    <div>
        <ag-grid-ng2 #agGrid style="width: 100%; height: 350px" class="ag-bootstrap"
                     [gridOptions]="gridOptions"
                     [columnDefs]='columnDefs '
                     [rowData]="connectionTypes"
                     [showToolPanel]="showToolPanel"
                     enableColResize
                     groupHeaders
                     toolPanelSuppressGroups
                     toolPanelSuppressValues
                     headerHeight="36"
                     rowHeight="34"
                     rowSelection="single"
                     (rowSelected)="onRowSelected($event)"
                     (modelUpdated)="onModelUpdated()">
        </ag-grid-ng2>
    </div>
</div>

所以我的问题是，当我更改下拉列表中的值时，如何让那些 header 更新？例如，如果我将下拉列表从 'en' 更改为 'fr'，我希望我的列 header 英文显示为 'Description' 更改为 'La description'（翻译不好，但会被注意到！）

我试过在 HTML 定义中放置管道

 [columnDefs]='columnDefs | translate'

这没有用，如果我把它放在绑定中，它就会出错。

我想我需要在组件中调用一个事件，但我不确定该怎么做。甚至可以做到吗？我看到一些参考资料表明我想做的事情在当前版本中是不可能的。

谁能给我指点一下？

Answer 1

您可以在 ag-grid 站点上查看 ag-grid angular 示例（带有标记的丰富网格）。在本例中 header.component.ts 更改

<div class="customHeaderLabel">params.displayName</div>

到

<div class="customHeaderLabel">{{params.displayName | translate}}</div>

并在 rich-grid-declarative.component.html 中更改

<ag-grid-column headerName="Name" field="name" [width]="150" [pinned]="true" ></ag-grid-column>

到

<ag-grid-column headerName="HEADER.NAME" field="name" [width]="150" [pinned]="true" ></ag-grid-column>

其中 'HEADER.NAME' 国际化翻译文件中已翻译字符串的 ID （例如 en.json、fr.json、...）

使用 ng2-translate 翻译 ag-grid-ng2 列 headers

using ng2-translate to translate ag-grid-ng2 column headers

ng2-translate