Angular 2 i18n 动态/即时翻译 [英] Angular 2 i18n dynamic/instant translation

问题描述

我遵循 angular.io 国际化食谱 (https://angular.io/docs/ts/latest/cookbook/i18n.html#!#angular-i18n).一切正常，如果我在 index.html 文件中更改我的语言环境:

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 编译器进行国际化时，您必须预先构建一个为每种语言提供单独的应用程序包并服务于基于服务器端语言检测或url参数.

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 编译器创建相应的翻译提供程序.
• 使用这些提供商引导应用程序.

虽然在官方文档中他们只有 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屋！