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

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

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 2

简而言之，如果不重新加载应用程序就无法更改语言环境，因为翻译工作由Angular 编译器完成。

---

从今天起你有two options当使用官方Angular i18n时：

使用AOT compiler

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

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

使用JIT compiler

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

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

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

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

---

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

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'},