Угловой перевод с помощью ng2-smart-table - PullRequest
Новая
       51

Угловой перевод с помощью ng2-smart-table

0 голосов
/ 08 марта 2019

Я использую смарт-таблицу ng2.

Я даю заголовок для столбца из файла component.ts. 

settings = {
    actions: {
      add: false,
      edit: false,
      delete: false
    },
    columns: {
      date: {
        title: 'Date'
      },
      sent: {
        title: 'Sent'
      },
      billed: {
        title: 'Billed'
      }       
    }
  }

У меня вопрос, как перевести этот заголовок в угловой.

Ответы [ 2 ]

0 голосов
/ 08 марта 2019

Я не использую angular-i18n, но в соответствии с https://github.com/angular/angular/issues/11405 и Переведите строки в код Angular Typescript , в настоящий момент вам нужно использовать что-то вроде https://github.com/ngx-translate/i18n-polyfill дляполучить локализованные строки в коде.

Непосредственно с помощью ngx-translate (возможно, также и при использовании polyfill) У меня есть функция setTableSettings, которая вызывается из ngOnInit и при изменении языка 

setTableSettings(){
        // i18n problem: https://github.com/akveo/ng2-smart-table/issues/277
        this.settings = {
            actions:{
                add: false,
                edit: false,
                delete: false
            },
            attr:  {
                class: 'table'
            },
            columns: {
                date: {
                    title: this.translateService.instant('MY.LOCALIZATION.IDENTIFIER.DATE'),
                    editable: false
                ...
                } 
                 // more columns
            } // end columns
        };          
    }
0 голосов
/ 08 марта 2019

Вы можете использовать ngx-translate-core для перевода (прочитайте документ , чтобы установить его).

В вашем компоненте вы можете попробовать что-то вроде этого: 

import { LangChangeEvent, TranslateService } from '@ngx-translate/core';
import { Component } from '@angular/core';

@Component({
    selector: 'app-contact',
    templateUrl: './contact.component.html'
})
export class YourComponent {
    settings: any;

    constructor(private translateService: TranslateService) {
        // we will set the default lang to 'fr' but this part is generally done
        // in your app.component.
        this.translateService.setDefaultLang('fr');
        this.translateService.use('fr');
        // we launch manually a table settings here with the default lang setted
        this.initTableSettings();
        // listening on the lang changements
        this.translateService.onLangChange.subscribe((event: LangChangeEvent) => {
            this.translateService.use(event.lang);
            // every time the languages will change, we reload the settings
            this.initTableSettings();
        });
    }

    initTableSettings(): void {
        this.settings = {
            actions: {
                add: false,
                edit: false,
                delete: false
            },
            columns: {
                date: {
                    title: this.translateService.instant('column_date')
                },
                sent: {
                    title: this.translateService.instant('column_sent')
                },
                billed: {
                    title: this.translateService.instant('column_billed')
                }
            }
        };
    }
}

И в вашем файле i18n (здесь fr.json): 

{
       "column_date": "<< your traduction in french here >>",
       "column_sent": "<< your traduction in french here >>",
       "column_billed": "<< your traduction in french here >>"
}

В документе вы можете увидеть, как установить и настроить TranslateService of Angular, в основном, как импортировать службу в модуль приложения, куда поместить файлы i18n и т. Д.

...