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（）as：

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/

使用Ionic2 / Angular2进行国际化和本地化选项

2 个答案: