Angular 2 i18n动态/即时翻译

Question

我已经按照angular.io食谱进行了国际化(https://angular.io/docs/ts/latest/cookbook/i18n.html#!#angular-i18n).一切正常,如果我在index.html文件中更改我的语言环境:

document.locale = 'en';

但我希望动态地改变它,就像我们在AngularJS中所做的那样.我找到了几个解决方案,例如:

//mycomponent.component.ts
changeLang(){
localStorage.setItem('localeId', "es");
location.reload(true);

} //I hardcoded the locale, but you get the idea

有没有办法在旅途中翻译文件？因为这种解决方案不实用,并且具有较长的重载时间.谢谢您的帮助!

Answer 1

简而言之,由于翻译工作是由Angular编译器完成的,因此无法在不重新加载应用程序的情况下更改语言环境.

截至今天,使用官方时有两种选择Angular i18n:

使用AOT编译器

在这种情况下,将为每个语言环境创建一个单独的包,您必须交换整个应用程序,即重新加载它.

使用AOT编译器进行国际化时,必须为每种语言预先构建单独的应用程序包,并根据服务器端语言检测或url参数提供相应的包.

使用JIT编译器

这种方法性能较差,但每种语言不一定需要捆绑.
在这种情况下,您将加载转换文件webpack并Angular在引导期间将其提供给编译器.

当应用程序加载时,JIT编译器在浏览器中编译应用程序.使用JIT编译器进行翻译是一个动态过程:

• 将相应的语言翻译文件导入为字符串常量.
• 为JIT编译器创建相应的转换提供程序.
• 使用这些提供程序引导应用程序.

虽然在官方文档中他们只有useValue提供者的示例,但我非常确定您可以使用它useFactory来提供TRANSLATIONS并LOCALE_ID基于您的配置.
您仍然需要在语言更改时重新引导您的应用程序,这反过来意味着重新加载,但是,嘿,用户将此捆绑包缓存在浏览器中,因此重新加载应该非常快.

无论如何,截至目前,如果你想获得真正动态的翻译,我建议你使用ngx-translate.
除了translate管道和服务之外,他们还有这个不错的推测性polyfill,可以在正式支持代码翻译时为您节省一些麻烦Angular i18n.

Answer 2

您可以检查一下，对我来说它工作完美并且具有出色的性能（即时翻译，无需加载时间或重新加载）：

\n\n

https://github.com/ocombe/ng2-translate

\n\n

然后，您可以使用本地存储或任何具有该功能的存储来设置语言：

\n\n

translateService.use(window.localStorage.getItem(\'language\'));

\n\n

您可以在单个文件中设置翻译，并且可以以 JSON 格式订购翻译：（我为每个组件封装一个对象）

\n\n

"PASSWORD_CONFIRM": {\n    "TITLE": "Merci !",\n    "DESCRIPTION": "Votre nouveau mot de passe a bien \xc3\xa9t\xc3\xa9 enregistr\xc3\xa9. Vous pouvez d\xc3\xa9sormais acc\xc3\xa9der \xc3\xa0 la plateforme !",\n    "BUTTON": "Entrer sur la plateforme"\n  },\n  ...\n

\n\n

然后您可以在 HTML 中设置文本，如下所示：

\n\n

  <div class="title">{{\'PASSWORD_CONFIRM.TITLE\' | translate}}</div>\n  <div class="description">\n      {{\'PASSWORD_CONFIRM.DESCRIPTION\' | translate}}\n  </div>\n

\n