Angulaire 2 i18n dynamique/traduction instantanée
J'ai suivi la angulaires.io livre de cuisine de l'internationalisation (https://angular.io/docs/ts/latest/cookbook/i18n.html#!#angulaires-i18n).
Tout fonctionne bien, et si je modifier mes paramètres régionaux dans le index.html fichier:
document.locale = 'en';
Mais je souhaite changer ce, de façon dynamique, comme nous avons l'habitude de faire dans AngularJS. J'ai trouvé plusieurs solutions, comme ceci:
//mycomponent.component.ts
changeLang(){
localStorage.setItem('localeId', "es");
location.reload(true);
} //I hardcoded the locale, but you get the idea
Est-il un moyen de traduire le document sur l'aller? Parce que cette solution n'est pas pratique, et a un temps de recharge long. Merci pour votre aide!
Vous devez vous connecter pour publier un commentaire.
En bref, il n'est pas possible de modifier les paramètres régionaux sans rechargement de l'application comme le travail de traduction effectué par
Angular
compilateur.Dès aujourd'hui, vous avez deux options lors de l'utilisation officielle
Angular i18n
:Utilisation AOT compilateur
Dans ce cas, une procédure distincte bundle sera créé pour tous les paramètres régionaux et vous aurez à le swap de l'ensemble de l'application, c'est à dire de le recharger.
Utilisation Compilateur JIT
Cette approche est moins performant mais vous n'aurez pas nécessairement besoin d'un bundle par langue.
Dans ce cas, vous chargez votre fichier de traduction avec
webpack
et de les fournir àAngular
compilateur lors de bootstrap.Bien que dans la documentation officielle ils n'ont que des exemples avec
useValue
fournisseurs, je suis sûr que vous pouvez utiliseruseFactory
de fournirTRANSLATIONS
etLOCALE_ID
en fonction de votre configuration.Vous aurez encore à re-bootstrap votre application lors de changement de la langue, qui, à son tour, des moyens de rechargement, mais bon, l'utilisateur a le lot mis en cache dans le navigateur, de sorte que le rechargement doit être assez rapide.
De toute façon, dès maintenant, si vous voulez vraiment faire de la dynamique des traductions, je vous suggère d'utiliser ngx-translate.
En outre
translate
pipe et le service qu'ils ont cette belle spéculative polyfill qui pourrait vous faire économiser des maux de tête lorsque le code traductions seront pris en charge officiellement parAngular i18n
.Vous pouvez vérifier cela, pour moi, il fonctionne parfaitement et a une très bonne performance (traduction instantanée avec un pas de temps de chargement ni de rechargement) :
https://github.com/ocombe/ng2-translate
Vous pouvez ensuite utiliser un local de stockage ou quoi que ce soit avec la langue :
translateService.use(window.localStorage.getItem('language'));
Vous pouvez définir vos traductions en un seul fichier, et vous pouvez commander les traductions au format JSON : (I encapsuler un objet par composante)
et puis vous pouvez définir votre texte dans le HTML comme suit :
Vous pouvez certainement le faire si vous utilisez la compilation JIT. Vous aurez besoin d'une usine de fournisseur pour vos traductions. Ajouter quelque chose comme ça à la racine de votre module: