2016-07-11 8 views
2

Ich entwickle eine ionic2/angular2 App für Android Handy.Internationalisierung und Lokalisierung Option mit Ionic2/Angular2

Ich möchte Option für Benutzer zur Auswahl der Sprache Option auf der Anmeldeseite zur Verfügung stellen.

Gibt es eine Möglichkeit, die App-Ebene Internationalisierung mit ionic2/angular2 zu tun?

Ich habe nicht so viele Beispiele mit Geräte-Ebene Internationalisierung gesehen.

+0

Bitte geben Sie ein Beispiel für die Geräteebene intern.? – AngJobs

Antwort

3

Sie müssen diese:

TRANSLATE_PROVIDERS, TranslateService, TranslatePipe, TranslateLoader, TranslateStaticLoader 

Sie können sie hier finden, zum Beispiel:

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

Quelle: https://github.com/ocombe/ng2-translate

0

Sie können NG2-Übersetzen in Ionic2

Navigieren Sie zuerst zu Ihrem Projektverzeichnis in Ihrem Terminal. Dann installieren NG2-übersetzen, indem Sie den folgenden Befehl ausführen

npm install ng2-translate --save 

Jetzt ./src/assets Verzeichnis. Hier erstellen Sie einen Ordner, sagen wir i18n. Erstellen Sie jetzt JSON-Dateien, die Schlüssel/Wert-Paare enthalten. Wie zum Beispiel:
en.json (./src/assets/en.json)

{ 
    "title":"Internationalization Example" 
} 

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

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

Jetzt lassen Sie einige Bootstrapping. Importieren Sie die folgenden in Ihrer app.component.ts Datei

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'; 

nun eine Funktion createTranslateLoader create() als:

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

hinzufügen Gefolgschaften für @NgModule:

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

jetzt offen App component.ts. Ersteinfuhr TranslateService

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

aktualisieren Konstruktor und initialisieren Übersetzung (unter Code im Kontext von app.component.ts ist)

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)); 

}

Alle setzen, so offen deine jeweilige Seite.HTML-Datei und verwenden Sie die folgende Interpolation für die Übersetzung

{{"key"|translate}} 

In meinem Fall wäre es

{{"title"|translate}} 

sein das ist alles. Für jede Hilfe besuchen Sie [Verwenden von NG2-Translate]: https://ionicframework.com/docs/v2/resources/ng2-translate/

Verwandte Themen