Angular i18 国际化，以编程方式更改语言

Question

通过此链接，我尝试在我的 Angular 6 应用程序中实现 i18 国际化，以便将我的 html 模板中的一些文本和日期时间翻译成英语和意大利语。

https://next.angular.io/guide/i18n

我了解到此功能分为 3 个阶段:

1. 定义翻译文本。没问题，我创建了一个包含 2 个文件 messages.en.xlf(和 message.it.xlf)的文件夹 src/locale 文件夹；这是 en 版本的示例。

   你好 i18n! (zh-CN) 此示例的介绍标题 欢迎用户

2. 将此文本链接到带有适当标签的 html 页面，这里也没有问题，我的 app.translations.html 中有我的示例标签。

   你好 i18n!

现在，我阅读了在启动期间本地化应用程序的方式(第 3 阶段)(在 Angular.json 文件中进行一些编辑并使用配置选项启动 ng serve)；但是，取而代之的是，我会以编程方式更改应用程序的语言。换句话说，我想要一个命令，例如

SwitchAppLanguage('en')

例如，用户可以通过按钮自行更改，或者应用程序可以读取浏览器默认语言来执行此操作。我该怎么做？

编辑

我试图以这种方式编辑我的 angular.json 文件

"configurations": {
  "production": {
     "i18nFile": "src/locale/messages.it.xlf",
     "i18nFormat": "xlf",
     "i18nLocale": "it",
(...)

并且，在 ng build 和 ng serve 之后，我希望看到意大利语文本，但它并没有发生(并且应用程序正确启动和服务)。我做错了什么？

Answer 1

我通过这种方式解决了开发模式的这个问题。也许有人可以从中受益。

这只是一个临时解决方案，直到 Angular 在 ivy i18n 中提供此功能。

缺点:只能在语言文件生成为 JSON 时才能完成:-(

polyfills.ts:

import { loadTranslations } from '@angular/localize';
import { isDevMode } from '@angular/core';

// All translation objects: must be json files for runtime-conditions! (XLF not supported)
import * as fr from "./i18n/messages.fr.json";
import * as nl from "./i18n/messages.nl.json";
import * as en from "./i18n/messages.json";


// Non-official translation loader to switch languages at runtime in development mode
if(isDevMode()){
  let translations = {};
  let lang = localStorage.getItem("lang");
  if(lang === "fr"){
    translations = fr;
  } else if (lang === "nl"){
    translations = nl;
  } else{
    translations = en;
  }

  // load translations at runtime
  loadTranslations(translations['default']['translations']);
}