Angular 2 i18n动态/即时翻译 [英] Angular 2 i18n dynamic/instant translation
问题描述
I've followed the angular.io cookbook for internationalization (https://angular.io/docs/ts/latest/cookbook/i18n.html#!#angular-i18n). Everything works fine, and if I change my locale in the index.html file:
document.locale = 'en';
但是我希望像我们以前在AngularJS中所做的那样动态地更改它.我发现了几种解决方案，例如:
But I wish to change this dynamically, as we used to do in AngularJS. I have found several solutions, such as this:
//mycomponent.component.ts
changeLang(){
localStorage.setItem('localeId', "es");
location.reload(true);
} //I hardcoded the locale, but you get the idea
是否可以随时随地翻译文档?因为此解决方案不切实际，并且具有很长的重新加载时间.谢谢您的帮助！
Is there a way to translate the document on the go? Because this solution is not practical, and has a long reload time. Thank you for your help!
推荐答案
总之，由于翻译工作是由Angular编译器完成的，因此不重新加载应用程序就无法更改语言环境.
In short it is not possible to change the locale without reloading the app as the translation work is done by Angular compiler.
截止到今天，您有两个选项使用官方Angular i18n时:
As of today you have two options when using official Angular i18n:
在这种情况下，将为每个语言环境创建一个单独的包，您必须交换整个应用程序，即重新加载它.
In this case a separate bundle will be created for every locale and you'll have to swap the whole application, i.e. reload it.
当您使用AOT编译器进行国际化时，您必须预先构建一个 每种语言的单独应用程序包，并为 基于服务器端语言检测或 网址参数.
When you internationalize with the AOT compiler, you must pre-build a separate application package for each language and serve the appropriate package based on either server-side language detection or url parameters.
使用 JIT编译器
这种方法的性能较差，但不一定需要每种语言都提供捆绑软件.
在这种情况下，可以使用webpack加载转换文件，并在引导过程中将其提供给Angular编译器.
Use JIT compiler
This approach is less performant but you'll not necessarily need a bundle per language.
In this case you load your translation file with webpack and provide it to Angular compiler during bootstrap.
JIT编译器在加载应用程序时在浏览器中对其进行编译. 使用JIT编译器进行翻译是一个动态过程:
The JIT compiler compiles the app in the browser as the app loads. Translation with the JIT compiler is a dynamic process of:
- 将适当的语言翻译文件作为字符串常量导入.
- 为JIT编译器创建相应的翻译提供程序.
- 通过这些提供程序引导应用程序.
- Importing the appropriate language translation file as a string constant.
- Creating corresponding translation providers for the JIT compiler.
- Bootstrapping the app with those providers.
尽管在官方文档中仅提供了useValue提供程序的示例，但我很确定您可以根据您的配置使用useFactory提供TRANSLATIONS和LOCALE_ID.
更改语言后，您仍然必须重新引导您的应用程序，这反过来又意味着要重新加载，但是，嘿，用户将此捆绑包缓存在浏览器中，因此重新加载应该非常快.
Although in the official documentation they only have examples with useValue providers, I'm pretty sure you can use useFactory to provide TRANSLATIONS and LOCALE_ID based on your configuration.
You'll still have to re-bootstrap your app upon language change, which, in turn, means reloading, but hey, the user have this bundle cached in the browser, so the reload should be pretty fast.
无论如何，到目前为止，如果您想获得真正的动态翻译，建议您使用 ngx-翻译.
除了translate管道和服务外，它们还有一个不错的投机性polyfill ，这可能会为您省去一些麻烦当Angular i18n正式支持代码翻译时.
Anyways, as of now, if you want to get really dynamic translations I'd suggest you to use ngx-translate.
Besides translate pipe and service they have this nice speculative polyfill that might save you some headache when code translations will be supported officially by Angular i18n.
这篇关于Angular 2 i18n动态/即时翻译的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
