使用ng2-translate翻译ag-grid-ng2列标题
这可能是一个愚蠢的问题，但我还是要问！
我正在学习如何使用Angular2，作为我正在工作的项目的一部分，有一个在英语和其他语言之间进行翻译的要求。我找到了优秀的ng2- translate，它出色地使用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> {{ 'Add' }}</button>
<button class="btn btn-secondary" type="button" (click)="editConnectionType()" [disabled]="!isRowSelected"><i class="fa fa-edit"></i> {{ 'Edit' | translate }}</button>
<button class="btn btn-secondary" type="button" (click)="deleteConnectionType()" [disabled]="!isRowSelected"><i class="fa fa-trash"></i> {{ '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'，我会希望我的列标题从英语中的'Description’更改为'La description‘(翻译错误，但这会被注意到！)
我尝试过在HTML定义上放置管道
[columnDefs]='columnDefs | translate'这不起作用，如果我把它放在绑定中，它就会出错。
我想我需要在组件中调用一个事件，但是我不确定如何去做。这件事能做到吗？我看到一些参考资料表明，我想要做的事情在当前版本中是不可能的。
有谁能给我点建议吗？
回答 1
Stack Overflow用户
发布于 2017-03-13 16:31:28
您可以在ag-grid站点上看到ag-grid角度示例(带标记的Rich Grid )。在此header.component.ts更改示例中
<div class="customHeaderLabel">params.displayName</div>至
<div class="customHeaderLabel">{{params.displayName | translate}}</div>和在rich-grid-declative.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等...)
https://stackoverflow.com/questions/41937701
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号