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时已two options：

使用AOT compiler

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

使用AOT编译器进行国际化时，必须预先构建一个为每种语言单独的应用程序包并提供服务基于服务器端语言检测的适当包或网址参数。

使用JIT compiler

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

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


将相应的语言翻译文件导入为字符串常量。

为JIT编译器创建相应的翻译提供程序。

使用这些提供程序引导应用程序。

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

无论如何，截至目前，如果您想获得真正动态的翻译，我建议您使用ngx-translate。
除了translate管道和服务之外，他们还有一个很好的speculative polyfill，当Angular i18n正式支持代码翻译时，可能会让您感到头疼。

Answer 2

你可以检查出来，对我而言，它完美无瑕，性能卓越（即时翻译，没有加载时间，也没有重新加载）：

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

然后，您可以使用本地存储或其他任何内容来设置语言：

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

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

"PASSWORD_CONFIRM": {
    "TITLE": "Merci !",
    "DESCRIPTION": "Votre nouveau mot de passe a bien été enregistré. Vous pouvez désormais accéder à la plateforme !",
    "BUTTON": "Entrer sur la plateforme"
  },
  ...

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

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

Answer 3

如果您使用的是JIT编译，您当然可以这样做。您需要翻译的工厂提供者。在您的根模块中添加以下内容：

  export function localeFactory(): string {
    return (window.clientInformation && window.clientInformation.language) || window.navigator.language;
  }

  providers:
  [
    {
      provide: TRANSLATIONS,
      useFactory: (locale) => {
        locale = locale || 'en'; // default to english if no locale provided
        return require(`raw-loader!../locale/messages.${locale}.xlf`);
      },
      deps: [LOCALE_ID]
    },
    {
      provide: LOCALE_ID,
      useFactory: localeFactory
    },
    {provide: TRANSLATIONS_FORMAT, useValue: 'xlf'},

Angular 2 i18n动态/即时翻译

3 个答案:

使用AOT compiler

使用JIT compiler