Nous avons décidé d'essayer et nous avons lancé un nouveau projet en utilisant Angular2. Jusqu'ici tout va bien, mais nous sommes actuellement confrontés à un problème. À ce stade, quelle est la bonne approche d’i18n pour Angular2? Nous avons un peu étudié et trouvé ceci:
Cependant, le dernier engagement date de plus de 5 mois ... Ne ressemble pas à un développement actif.
Quelqu'un a essayé d'utiliser angular-translate ou angular-gettext? Ou peut-être qu'avec Angular2, il vaut mieux envelopper quelque chose de JS comme i18next? Quelqu'un pourrait-il partager ses pensées? Peut-être que vous avez rencontré le même problème?
Plunk a été mis à jour à Angular 2 Final: https://plnkr.co/edit/4euRQQ . Les choses semblent fonctionner comme en RC7.
La nouvelle section i18n a été ajoutée à la documentation officielle Angular 2. En gros, il explique en détail ce qui se passe dans le plan ci-dessus.
XLIFF est le seul format de traduction, pas de support json . Un fichier source de traduction (xliff, xlf) doit être créé avec ng-xi18n outil:
package.json:
"scripts": {
"i18n": "ng-xi18n",
...
}
et
npm run i18n
Voir la section Fusion de traduction pour plus d'informations sur la fusion d'une traduction dans un modèle de composant. C'est fait en utilisant le plug-in SystemJS Text.
Un autre exemple utilisant Gulp http://www.savethecode.com/angular2-i18n-native-support/
Personnel plus ancien: Mise à jour basée sur RC7 et liens fournis par Herman Fransen:
J'ai créé un exemple Plunkr minimal: https://plnkr.co/edit/4W3LqZYAJWdHjb4Q5EbM
Commentaires à plunkr:
bootstrap
devrait fournir TRANSLATIONS
, TRANSLATIONS_FORMAT
, LOCALE_ID
avec des valeurs -> configurer les traductionsi18n
.xlf
. Les liens entre les langues se font via Id
, les liens avec html avec une valeur de <source>
tag dans xlf
xlf
ne sont pas utilisés directement; un fichier .ts
est créé manuellement pour envelopper le contenu de xlf
dans une variable exportable. Je suppose que cela devrait fonctionner automatiquement dans la version finale (peut-être même maintenant).C'est la première approche officiellement documentée que j'ai trouvée… .. Cependant, elle est encore difficilement utilisable. Je vois les problèmes suivants dans l'implémentation actuelle:
bootstrap
, impossible de la modifier au moment de l'exécution. Cela devrait être changé en finale.xlf
est généré SHA. La méthode actuelle pour obtenir cet identifiant est un peu compliquée: vous créez un nouvel élément traduisible, utilisez-le, copiez SHA id à partir d'une erreur et collez-le dans votre fichier i18n.lang.xlf
.Il y a une grande documentation pull request concernant i18n
Anciens collaborateurs: Notes de publication https://github.com/angular/angular/blob/master/CHANGELOG.md ont un enregistrement
i18n: fusionner les traductions 7a8ef1e
Un gros morceau de i18n a été introduit dans Angular 2 RC5
Malheureusement, toujours pas de documentation disponible.
Tout le monde est impatient de la mise en œuvre officielle, mais celle-ci a fonctionné pour mon cas d'utilisation: https://github.com/ocombe/ng2-translate
README est assez complet, et si vous avez besoin de quelque chose de vraiment particulier (pour moi, c'était du scission de code), le code lui-même n'est ni trop long ni difficile à lire.
Le support pour i18n est maintenant officiel dans Angular 2 RC6
Blog de sortie officiel:
https://angularjs.blogspot.nl/2016/09/angular-2-rc6_1.html
Un échantillon d'internationalisation avec Angular 2 RC6
https://github.com/StephenFluin/i18n-sample
Plus d'informations sur le fonctionnement du nouveau concept d'i18n dans angular2:
https://lingohub.com/blog/2015/03/angular-2-i18n-update-ng-conf-2015
J'ai trouvé un autre moyen d'implémenter ceci en utilisant pipe
et service
HTML
<!-- should display 'hola mundo' when translate to Spanish -->
<p>{{ 'hello world' | translate }}</p>
TypeScript
...
// "this.translate" is our translate service
this.translate.use('es'); // use spanish
...
// should display 'hola mundo' when translated to Spanish
this.translatedText = this.translate.instant('hello world');
...
https://scotch.io/tutorials/simple-language-translation-in-angular-2-part-1https://scotch.io/tutorials/simple-language-translation- in-angular-2-part-2
Il y a un support officiel pour i18n dans Angular.io ici:
https://angular.io/docs/ts/latest/cookbook/i18n.html
Mais! Comme mentionné dans la documentation:
Vous devez créer et déployer une version distincte de l'application pour chaque langue supportée!
Cela rend cette fonctionnalité inutile dans la plupart des cas ...
À moins que vous ne l'utilisiez sans l'interface de ligne de commande, comme décrit ici:
https://devblog.dymel.pl/2016/11/03/angular2-and-i18n-translate-your-app/
Je prépare un POC et la documentation officielle est encombrante pour le moins, alors j’ai essayé ngx-translate http://www.ngx-translate.com/ et j’ai littéralement eu le bonjour dans quelques minutes, il y a quelques mises en garde:
longue histoire courte j'ai aimé ngx-translate si vous avez une petite application et n'avez besoin que de la traduction
Personnellement, je voulais la localisation, alors je regarde https://github.com/robisim74/angular-l10n . Ça a l'air bien, mais je n'ai pas testé, alors je vais que vous sachiez plus tard, ou vous pouvez y aller et nous essayons tous