使用Ionic2 / Angular2進行國際化和本地化選項

Question

我正在為Android手機開發ionic2 / angular2應用程序。

我想提供選項供用戶在登錄頁面中選擇語言選項。

有什么方法可以使用ionic2 / angular2進行應用程序級別的國際化？

我還沒有看到太多關於設備級別國際化的示例。

Answer 1

您需要這些：

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

Answer 2

您可以在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/