使用ng2-translate翻譯ag-grid-ng2列標題

這可能是一個愚蠢的問題，但我仍然在問！使用ng2-translate翻譯ag-grid-ng2列標題

我在學習如何使用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'，我希望我的列標題在英語中顯示爲'Description'，以更改爲'La description'（翻譯錯誤，但它會被注意到！）

我試圖把管道上的HTML定義

[columnDefs]='columnDefs | translate'

，沒有工作，如果我把它放在結合它的錯誤。

我想我需要在組件中調用一個事件，但我不知道如何去做。它可以完成嗎？我已經看到一些參考文獻暗示我想要做的事在當前版本中是不可能的。

任何人都可以給我任何指針？

來源

2017-01-30 Emma Pearlman

您可以在ag-grid站點上看到Ag-grid角度示例（帶有標記的Rich Grid）。在這個例子中header.component.ts改變

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

到

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

和富網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'用於翻譯i18n翻譯文件中的字符串的標識（例如， en.json，fr.json，...）

來源

2017-03-13 08:31:27

我無法找到它正在改變的例子，就像你描述它的方式一樣......你可以發佈這個例子的鏈接，我能夠看看這個例子嗎？ @avor_il –

嗨菲利普， [鏈接]（https://www.ag-grid.com/example-angular-rich-grid/?framework=angular#gsc.tab=0） –

使用ng2-translate翻譯ag-grid-ng2列標題

回答

相關問題