Интернационализация и локализация с использованием Ionic2/Angular2

Question

Я разрабатываю приложение ionic2/angular2 для мобильных телефонов Android.

Я хочу предоставить пользователю возможность выбрать язык на странице входа.

Есть ли способ сделать интернационализацию уровня приложения с помощью 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

Вы можете использовать NG2-Перевести на Ionic2

Сначала перейдите в каталог вашего проекта в своем терминале. Затем установите NG2-перевод, выполнив следующую команду

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] 
--------- 
--------- 
}) 

Теперь откройте приложение .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)); 

}

Все готовы, так открыто вашей соответствующей странице.HTML-файл и использовать следующую интерполяцию для перевода

{{"key"|translate}} 

В моем случае это было бы

{{"title"|translate}} 

Вот и все. Для любой помощи посетите [Использование NG2-Перевести]: https://ionicframework.com/docs/v2/resources/ng2-translate/