Question

我正在使用ng2-smart-table。

我要从component.ts文件中获取该列的标题。

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

我的问题是如何将此标题转换为角度。

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时也是如此），我有一个函数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
        };          
    }

带有ng2-smart-table的角度翻译

2 个答案: