Использование ng2-translate для перевода заголовков столбцов ag-grid-ng2

Question

Это может быть глупый вопрос, но я все равно задаю!

Я учусь использовать Angular2, и в рамках проекта, над которым я работаю, есть требование переводить между английским и другими языками. Я нашел превосходный ng2-translate, который прекрасно работает для перевода контента в html-шаблонах с использованием конвейерного перевода.

В одной части сайта есть сетка, созданная с помощью ad-grid-ng2. Определения столбцов создаются в компоненте машинописного текста и привязываются к 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 (Rich Grid с разметкой) на сайте ag-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>

где id 'HEADER.NAME' для переведенной строки в файлах перевода i18n (например, en.json, fr.json, ...)