使用 ng2-smart-table 进行角度翻译答案

【问题标题】：Angular translation with ng2-smart-table使用 ng2-smart-table 进行角度翻译
【发布时间】：2019-03-08 13:38:32
【问题描述】：

我正在使用 ng2-smart-table。

我正在为 component.ts 文件中的列提供标题。

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

我的问题是如何用角度翻译这个标题。

【问题讨论】：

标签： angular internationalization ng2-smart-table angular-i18n

【解决方案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 文件放在哪里等等。

【讨论】：

【解决方案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 时）我有一个函数 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
        };          
    }

【讨论】：