ng2-translateを使用してag-grid-ng2カラムヘッダーを変換する

Question

これは愚かな質問かもしれませんが、とにかく頼んでいます！

私はAngular2の使い方を学んでいます。プロジェクトの一環として、英語と他の言語の間で翻訳する必要があります。私は翻訳パイプを使ってhtmlテンプレートのコンテンツを翻訳するために素晴らしいng2-translateを見つけました。

サイトの一部には、ad-grid-ng2を使用して作成されたグリッドがあります。列defは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' 

にパイプを入れてみました、と私はそれを置けばそれでエラーを結合しました。

コンポーネント内でイベントを呼び出す必要があると思いますが、その方法についてはわかりません。それはできますか？現在のリリースでは、私がしたいことができないことを示唆している参考文献を見てきました。

誰でも私に任意のポインタを教えてもらえますか？

Answer 1

ag-gridサイトで、ag-gridの角度の例（マークアップが付いたリッチグリッド）を見ることができます。 header.component.ts、この例で

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

に

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

とリッチグリッドdeclarative.component.html変化

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

に

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

を変更します

ここで ' HEADER.NAME 'i18n翻訳ファイルの翻訳された文字列のID （例： en.json、fr.json、...）