Question

这可能是一个愚蠢的问题，但无论如何我都在问！

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

在网站的一个部分中，使用ad-grid-ng2创建了一个网格。列defs在typescript组件中创建，并绑定到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>

所以我的问题是当我更改下拉列表中的值时，如何更新这些标题？例如，如果我将下拉列表从'en'更改为'fr'，我希望我的英文列标题“英文描述”改为“La description”（翻译不好，但会注意到！）< / p>

我尝试在HTML定义上添加管道

 [columnDefs]='columnDefs | translate'

哪个不起作用，如果我把它放在绑定中就会出错。

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

任何人都可以给我任何指示吗？

Answer 1

您可以在ag-grid站点上看到ag-grid角度示例（带有标记的Rich Grid）。在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为i18n翻译文件中的翻译字符串（例如en.json，fr.json，...）

使用ng2-translate翻译ag-grid-ng2列标题

1 个答案: