ng2-smart-table角度转换

Question

我使用的是ng2-smart-table。

我给的标题从component.ts文件的列。

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

我的问题是如何将这个标题翻译成angular。

Answer 1

您可以使用ngx-translate-core进行翻译(请阅读the doc进行安装)。

在您的组件中，您可以尝试如下所示：

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 >>"
}

你可以在文档中看到如何安装和配置Angular的TranslateService，基本上如何在你的应用模块中导入服务，你的i18n文件放在哪里，等等。

Answer 2

我没有使用angular-i18n，但是根据https://github.com/angular/angular/issues/11405和Translate strings inside Angular Typescript code的说法，目前您必须使用像https://github.com/ngx-translate/i18n-polyfill这样的东西来获得代码中的本地化字符串。

直接使用ngx-translate (可能在使用polyfill时也是如此)，我有一个从ngOnInit调用并在语言更改时调用的函数setTableSettings

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
        };          
    }