web-dev-qa-db-fra.com

angular-i18n Angular 6 Internationalisation: comment gérer les variables

J'ai lu le document entier ici: https://angular.io/guide/i18n

Je ne peux pas comprendre comment je suis supposé gérer un tag HTML de cette nature:

<div i18n="@@myId" class="title-text">{{currentPage}}</div>

ou un comme ça:

<div i18n="@@myId" class="title-text" [innerHTML]="currentPage"></div>

il ne mentionne aucune variable de texte comme si elles supposaient simplement que tous nos noms et tous les textes seraient codés en dur dans le code HTML.

un fichier de langue est censé ressembler à ceci: 

<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="en" datatype="plaintext" original="ng2.template">
    <body>
      <trans-unit id="myId" datatype="html">
        <source>Hello</source>
        <target>Bonjour</target>
      </trans-unit>
    </body>
  </file>
</xliff>

Dois-je faire quelque chose comme ça pour gérer les multiples possibilités du var?

<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="en" datatype="plaintext" original="ng2.template">
    <body>
      <trans-unit id="myId" datatype="html">
        <source>Title 1</source>
        <target>Titre 1</target>
        <source>Help 2</source>
        <target>Aide 2</target>
        <source>New 3</source>
        <target>Nouveau 3</target>
      </trans-unit>
    </body>
  </file>
</xliff>

Je ne pense pas que ça va marcher. Comment gérer les variables? 

METTRE À JOUR : 

si j'utilise leur outil de génération de fichier de langue:

ng xi18n --output-path locale --out-file english.xlf --i18n-locale fr

Je reçois : 

<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="fr" datatype="plaintext" original="ng2.template">
    <body>
      <trans-unit id="9f3e56faa6da73b83f4646a1e074b970891894da" datatype="html">
        <source><x id="INTERPOLATION" equiv-text="{{currentPage}}"/></source>
        <context-group purpose="location">
          <context context-type="sourcefile">app/logged.in/top.bar/top.bar.component.ts</context>
          <context context-type="linenumber">85</context>
        </context-group>
        <note priority="1" from="description">the title of the current route</note>
      </trans-unit>
    </body>
  </file>
</xliff>

à peu près sûr que equiv-text="{{currentPage}}" est un déchet. mais cela peut encore fonctionner, il faut tester ... en attendant, je ne parviens pas à accepter les nouvelles configurations.

MISE À JOUR DE NOUVEAU: 

pour que ng serve --configuration=fr fonctionne 

vous devez éditer angular.json plus loin, ce n'est pas spécifié dans la documentation officielle mais ils en parlent ici: https://github.com/angular/angular-cli/wiki/stories-internationalization

Eh bien, j’ai ajouté un <target>Title</target> et cela fonctionne, mais bien sûr, cela implique qu’à présent, chaque valeur de la var retourne "title" quoi qu’il en soit.

également en plaçant les balises i18n partout, je me suis heurté à cela dans mon code: 

 <dropzone [message]="valid? '' : 'Placez ici votre fichier Excel csv à Ajouter aux lignes ci-dessous. (Ces lignes apparaîtront à la fin de la table)'" (success)="uploaded()"></dropzone>

alors quoi maintenant? Comment traduire le message transmis à la zone de dépôt?

angularangular-i18n
2
tatsu

Ce polyfill semble être la meilleure voie à suivre en ce moment. Il est principalement écrit par Olivier Combe, membre de l'équipe Angular responsable de i18n:

https://github.com/ngx-translate/i18n-polyfill

Pour Angular 5, vous aurez besoin de la version 0.2.0 pour installer:

npm install @ngx-translate/[email protected] --save

Pour Angular 6, obtenez la dernière version (actuellement 1.0.0):

npm install @ngx-translate/[email protected] --save

Le polyfill fonctionne pour les compilations JIT et AOT, pour Angular 5 (cela fonctionnera également pour Angular 6). Voici ce que vous devez faire pour traduire dans une seule langue (c’est un bon moyen de faire en sorte que cela fonctionne. Vous pouvez alors utiliser plusieurs langues plus tard):

Remarque sur l'utilisation de la compilation AOT: Si vous utilisez la compilation AOT pour traduisez vos modèles, traduction des messages dans des fichiers .ts sera toujours fait au moment de l'exécution avec la compilation JIT (c'est pourquoi vous devez référencer TRANSLATIONS et TRANSLATIONS_FORMAT au lieu de les enregistrer dans vos scripts de construction).

app.module.ts

Ajoutez les importations suivantes à votre module racine Angular:

import { TRANSLATIONS, TRANSLATIONS_FORMAT } from '@angular/core';
import { I18n } from '@ngx-translate/i18n-polyfill';

ajoutez la constante suivante et spécifiez les fournisseurs dans votre module racine:

// add this after import + export statements
// you need to specify the location for your translations file
// this is the translations file that will be used for translations in .ts files

const translations = require(`raw-loader!../locale/messages.fr.xlf`);

@NgModule({ ....

  providers:
  [
    I18n,
    {provide: TRANSLATIONS, useValue: translations},
    {provide: TRANSLATIONS_FORMAT, useValue: 'xlf'},
    ...

* .ts

Dans le fichier .ts où vous souhaitez fournir une traduction, ajoutez ceci:

import { I18n } from '@ngx-translate/i18n-polyfill';

constructor(private i18n: I18n) {
    console.log(i18n("This is a test {{myVar}} !", {myVar: "^_^"}));
}

Cela montre que vous pouvez même inclure des interpolations dans les messages que vous souhaitez traduire.

Vous pouvez utiliser les définitions i18n (c’est-à-dire en spécifiant la traduction "source" id, sens, description) comme ceci:

this.i18n({value: 'Some message', id: 'Some message id', meaning: 'Meaning of some message', description: 'Description of some message'})

Vous aurez toujours besoin d'extraire les messages, et vous pouvez utiliser l'outil ngx-extractor pour le faire. Voir le readme sur la page polyfill .

Tout cela est compatible avec xliffmerge , un excellent outil pour fusionner automatiquement toutes les traductions new que vous ajoutez, sans écraser les traductions existantes. Xliffmerge peut également effectuer automatiquement des traductions à l'aide de Google Translate (vous aurez besoin d'une clé API Google Translate). Pour que cela fonctionne, je fais l'extraction et la fusion/traduction dans l'ordre suivant, before, je réalise la construction AOT proprement dite:

"extract-i18n-template-messages": "ng xi18n --outputPath=src/locale --i18n-format=xlf",
"extract-i18n-ts-messages": "ngx-extractor --input=\"src/**/*.ts\" --format=xlf --out-file=src/locale/messages.xlf",
"generate-new-translations": "xliffmerge --profile xliffmerge.json en fr es de zh"

La construction AOT pour une version linguistique spécifique du site se présente comme suit:

"build:fr": "ng build --aot --output-path=dist/fr --base-href /fr/ --i18nFile=src/locale/messages.fr.xlf --i18nFormat=xlf --locale=fr",

Statut actuel de ce polyfill:

Ceci est principalement écrit par Olivier Combe, membre de l'équipe Angular responsable de i18n. A ce stade, il s'agit d'un polyfill «spéculatif» pour la traduction de variables ou de chaînes dans le fichier .ts. Elle sera probablement remplacée par une API intégrée à Angular qui sera très similaire. La mise à niveau ultérieure devrait donc être raisonnablement gérable. Voici le diclaimer de la page Github:

Cette bibliothèque est un polyfill spéculatif, cela signifie qu’elle est supposée le faire remplacer une API à venir . Si l'API est différente, un outil de migration sera fourni si cela est possible et nécessaire.

Il a été question de la prise en charge dans les prochaines versions mineures de Angular 6 de la traduction de variables/chaînes dans le code.

Voici une citation d'Olivier Combe (de mars de cette année), issue de la discussion suivante sur Github:

https://github.com/angular/angular/issues/11405

Le premier PR pour le runtime i18n a été fusionné en maître, avec une application de démonstration Hello World que nous utiliserons pour tester les fonctionnalités. Ça marche au moment de l'exécution, et supporte théoriquement les traductions de code, même si elles sont là. y a pas encore de service pour ça. Pour l’instant, c’est un support très minimal (chaînes Statiques), nous travaillons à l’ajout de nouvelles fonctionnalités (l’extraction Fonctionnera la semaine prochaine, puis la chaîne dynamique avec des espaces réservés Et des variables). Après cela, nous ferons le service pour les traductions de code . Dès qu'une nouvelle fonctionnalité est terminée, elle est fusionnée dans la version principale. ne sera pas obligé d'attendre un nouveau major.

6
Chris Halcrow

Compte tenu des instructions officielles " traduire-pluriel-et-sélectionner-expressions ", vous ne pouvez pas faire? :

<div class="title-text" i18n>{currentpage, select, title1 {title1} title2 {title2} unknowntitle {unknowntitle}}</div>
0
user1767316