使用 Ionic2/Angular2 的国际化和本地化选项答案

【问题标题】：Internationalize and Localize option using Ionic2/Angular2使用 Ionic2/Angular2 的国际化和本地化选项
【发布时间】：2016-11-13 08:54:02
【问题描述】：

我正在为 Android 手机开发 ionic2/angular2 应用程序。

我想在登录页面为用户提供选择语言选项的选项。

有没有办法使用 ionic2/angular2 进行应用级别的国际化？

我没有见过这么多设备级国际化的例子。

【问题讨论】：

请举一个设备级实习生的例子。？

标签： angular ionic2

【解决方案1】：

您可以在 Ionic2 中使用 ng2-Translate

首先导航到终端中的项目目录。然后通过执行以下命令安装 ng2-translate

npm install ng2-translate --save

现在移动到 ./src/assets 目录。在这里，创建一个文件夹，比如说 i18n。现在创建包含键值对的 json 文件。例如：
en.json (./src/assets/en.json)

{
  "title":"Internationalization Example"
}

fr.json (./src/assets/en.json)

{
  "title":"Exemple d'internationalisation"
}

现在让我们做一些引导。在您的 app.component.ts 文件中导入以下内容

import {HttpModule} from '@angular/http';
import {Http} from '@angular/http';
import {BrowserModule} from "@angular/platform-browser";
import {TranslateStaticLoader, TranslateLoader, TranslateModule} from 'ng2-translate/ng2-translate';

现在创建一个函数 createTranslateLoader() 为：

export function createTranslateLoader(http: Http) {
  return new TranslateStaticLoader(http, './assets/i18n', '.json');
}

为@NgModule 添加以下内容：

@NgModule({
 ---------
 ---------
 imports: [
 IonicModule.forRoot(MyApp),
 TranslateModule.forRoot({
   provide: TranslateLoader,
   useFactory: createTranslateLoader,
   deps: [Http]
  }),
 BrowserModule,
 HttpModule,
 ],
 exports: [BrowserModule, HttpModule, TranslateModule]
 ---------
 ---------
 })

现在打开 app.component.ts。首先导入 TranslateService

import {TranslateService} from 'ng2-translate/ng2-translate';

更新你的构造函数并初始化翻译（下面的代码是在 app.component.ts 的上下文中）

constructor(platform: Platform,private translate: TranslateService) {
  platform.ready().then(() => {
    // Verify your lacale
    var userLang = navigator.language.split('-')[0];
    console.log(userLang);

    //initialize ng2-translate
    this.initTranslation();
  });
}
initTranslation() {
var userLang = navigator.language.split('-')[0]; 
userLang = /(fr|en)/gi.test(userLang) ? userLang : 'en';

// Default language if file not found
this.translate.setDefaultLang('en');

// Change userLang = 'fr' to check instantly
this.translate.use(userLang);

this.translate.get("title", null).subscribe(localizedValue => console.log(localizedValue));

}

一切就绪，打开各自的 page.html 文件并使用以下插值进行翻译

{{"key"|translate}}

在我的情况下是

{{"title"|translate}}

就是这样。如需任何帮助，请访问 [使用 NG2-Translate]：https://ionicframework.com/docs/v2/resources/ng2-translate/

【讨论】：

【解决方案2】：

你需要这些：

TRANSLATE_PROVIDERS, TranslateService, TranslatePipe, TranslateLoader, TranslateStaticLoader

您可以在这里找到它们，例如：

import {HTTP_PROVIDERS} from '@angular/http';
import {Component, Injectable} from '@angular/core';
import {TRANSLATE_PROVIDERS, TranslateService, TranslatePipe, TranslateLoader, TranslateStaticLoader} from 'ng2-translate/ng2-translate';
import {bootstrap} from '@angular/platform-browser-dynamic';

bootstrap(AppComponent, [
    HTTP_PROVIDERS,
    // not required, but recommended to have 1 unique instance of your service
    TRANSLATE_PROVIDERS
]);

@Component({
    selector: 'app',
    template: `
        <div>{{ 'HELLO' | translate:{value: param} }}</div>
    `,
    pipes: [TranslatePipe]
})
export class AppComponent {
    param: string = "world";

    constructor(translate: TranslateService) {
        var userLang = navigator.language.split('-')[0]; // use navigator lang if available
        userLang = /(fr|en)/gi.test(userLang) ? userLang : 'en';

         // this language will be used as a fallback when a translation isn't found in the current language
        translate.setDefaultLang('en');

         // the lang to use, if the lang isn't available, it will use the current loader to get them
        translate.use(userLang);
    }
}

来源：https://github.com/ocombe/ng2-translate

【讨论】：