Aurelia - Localisation

Offres Aurelia i18nbrancher. Dans ce chapitre, vous apprendrez comment localiser votre application à l'aide de ce plugin.

Étape 1 - Installer un plugin

Ouvrez le command prompt window et exécutez le code suivant pour installer i18n brancher.

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

Nous devons également installer le plugin backend.

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

Étape 2 - Créer des dossiers et des fichiers

Dans le dossier racine du projet, nous devons créer un locale annuaire.

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

Dans ce dossier, vous devez ajouter de nouveaux dossiers pour la langue de votre choix. Nous allons créeren avec translation.js fichier à l'intérieur.

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

Étape 3 - Utilisez un plugin

Vous devez utiliser le bootstrap manuel pour pouvoir utiliser ce plugin. Consultez le chapitre Configuration pour plus d'informations. Nous devons ajouteri18n plugin au main.js fichier.

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

Étape 4 - Traduction du fichier JSON

Il s'agit du fichier dans lequel vous pouvez définir les valeurs de traduction. Nous utiliserons un exemple d'une documentation officielle. lede-DE Le dossier devrait en fait être utilisé pour la traduction en langue allemande, mais nous utiliserons plutôt des phrases en anglais pour une meilleure compréhension.

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"
}

Étape 5 - Définir les paramètres régionaux

Nous avons juste besoin d'importer i18n plugin et configurez-le pour utiliser le code JSON de de-DE dossier.

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

Étape 6 - Afficher

Il existe plusieurs façons de traduire les données. Nous utiliserons un ValueConverter personnalisé nommét. Vous pouvez voir dans l'exemple suivant différentes manières de formater les données. Comparez cela avec letranslation.json fichier et vous remarquerez les modèles utilisés pour le formatage.

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

Lorsque nous exécutons l'application, nous obtenons la sortie suivante.