Aurelia - Lokalisierung

Aurelia bietet i18nPlugin. In diesem Kapitel erfahren Sie, wie Sie Ihre App mit diesem Plugin lokalisieren.

Schritt 1 - Installieren Sie ein Plugin

Öffne das command prompt Fenster und führen Sie den folgenden Code aus, um zu installieren i18n Plugin.

C:\Users\username\Desktop\aureliaApp>jspm install aurelia-i18n

Wir müssen auch das Backend-Plugin installieren.

C:\Users\username\Desktop\aureliaApp>jspm install npm:i18next-xhr-backend

Schritt 2 - Ordner und Dateien erstellen

Im Projektstammordner müssen wir eine erstellen locale Verzeichnis.

C:\Users\username\Desktop\aureliaApp>mkdir locale

In diesem Ordner müssen Sie neue Ordner für jede gewünschte Sprache hinzufügen. Wir werden schaffenen mit translation.js Datei im Inneren.

C:\Users\username\Desktop\aureliaApp\locale>mkdir en
C:\Users\username\Desktop\aureliaApp\locale\en>touch translation.json

Schritt 3 - Verwenden Sie ein Plugin

Sie müssen manuelles Bootstrapping verwenden, um dieses Plugin verwenden zu können. Weitere Informationen finden Sie im Kapitel Konfiguration. Wir müssen hinzufügeni18n Plugin zum main.js Datei.

main.js

import {I18N} from 'aurelia-i18n';
import XHR from 'i18next-xhr-backend';

export function configure(aurelia) {
   aurelia.use
   .standardConfiguration()
   .developmentLogging()
	
   .plugin('aurelia-i18n', (instance) => {
      // register backend plugin
      instance.i18next.use(XHR);

      // adapt options to your needs (see http://i18next.com/docs/options/)
      instance.setup({
         backend: {                                  
            loadPath: '/locales/{{lng}}/{{ns}}.json',
         },
				
         lng : 'de',
         attributes : ['t','i18n'],
         fallbackLng : 'en',
         debug : false
      });
   });

   aurelia.start().then(a => a.setRoot());
}

Schritt 4 - JSON-Übersetzungsdatei

In dieser Datei können Sie Übersetzungswerte festlegen. Wir werden ein Beispiel aus einer offiziellen Dokumentation verwenden. Dasde-DE Der Ordner sollte eigentlich für die Übersetzung in die deutsche Sprache verwendet werden. Zum besseren Verständnis werden jedoch stattdessen englische Phrasen verwendet.

translation.json

{
   "score": "Score: {{score}}",
   "lives": "{{count}} life remaining",
   "lives_plural": "{{count}} lives remaining",
   "lives_indefinite": "a life remaining",
   "lives_plural_indefinite": "some lives remaining",
   "friend": "A friend",
   "friend_male": "A boyfriend",
   "friend_female": "A girlfriend"
}

Schritt 5 - Gebietsschema festlegen

Wir müssen nur importieren i18n Plugin und stellen Sie es so ein, dass JSON-Code von verwendet wird de-DE Ordner.

app.js.

import {I18N} from 'aurelia-i18n';

export class App {
   static inject = [I18N];
	
   constructor(i18n) {
      this.i18n = i18n;
      this.i18n
      .setLocale('de-DE')
		
      .then( () => {
         console.log('Locale is ready!');
      });
   }
}

Schritt 6 - Anzeigen

Es gibt verschiedene Möglichkeiten, Daten zu übersetzen. Wir werden einen benutzerdefinierten ValueConverter mit dem Namen verwendent. Im folgenden Beispiel sehen Sie verschiedene Möglichkeiten zum Formatieren von Daten. Vergleichen Sie dies mit demtranslation.json Datei und Sie werden die Muster bemerken, die für die Formatierung verwendet werden.

<template>
   <p>
      Translation with Variables: <br />
      ${ 'score' | t: {'score': 13}}
   </p>

   <p>
      Translation singular: <br />
      ${ 'lives' | t: { 'count': 1 } }
   </p>

   <p>
      Translation plural: <br />
      ${ 'lives' | t: { 'count': 2 } }
   </p>

   <p>  
      Translation singular indefinite: <br />
      ${ 'lives' | t: { 'count': 1, indefinite_article: true  } }
   </p>

   <p>
      Translation plural indefinite: <br />
      ${ 'lives' | t: { 'count': 2, indefinite_article: true } }
   </p>

   <p>
      Translation without/with context: <br />
      ${ 'friend' | t } <br />
      ${ 'friend' | t: { context: 'male' } } <br />
      ${ 'friend' | t: { context: 'female' } }
   </p>
	
</template>

Wenn wir die App ausführen, erhalten wir die folgende Ausgabe.