Angular 11（或 9+）I18n 在启动时设置语言环境

Question

我有一个旧的 angular 项目 (v8)，我在其中使用 i18n 标记我所有的翻译。我有 2 个 xlf 文件，一个用于 en，一个用于 fr - 并在运行时选择要使用的文件。这很好用。

但是，在新的 angular 项目 (v11) 中，这种方法不再有效。代码没有错误，并且确实表明存在问题，但是文本未在屏幕上翻译。

main.ts文件中的代码如下

let languageCode: string = localStorage.getItem("language") ? localStorage.getItem("language") : 'en-GB';

// use the require method provided by webpack
// we use the webpack raw-loader to return the content as a string
declare const require;

var translations = undefined;

switch (languageCode) {
    case AppService.Languages.english:
        break;
  default:
        translations = require(`raw-loader!./locale/messages.${languageCode}.xlf`);
  break;
}
 
platformBrowserDynamic().bootstrapModule(AppModule, {
  providers: [
    {provide: TRANSLATIONS, useValue: translations},
    {provide: TRANSLATIONS_FORMAT, useValue: 'xlf'},
    {provide: LOCALE_ID, useValue: languageCode }
  ]
});

我在app.module.ts

中也有以下内容

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
import localeFrExtra from '@angular/common/locales/extra/fr';

let urlParams: URLSearchParams = new URLSearchParams(window.location.search);
let languageCode: string = localStorage.getItem("language") ? localStorage.getItem("language") : 'en-GB';

registerLocaleData(localeFr, 'fr-FR', localeFrExtra);

.....

 providers: [
    { provide: LOCALE_ID, useValue: languageCode },

有没有其他人有过这种方法不适用于较新的 angular 版本的经验？

注意：诸如日期格式之类的内置内容在正确的语言环境中出现 - EG 日期格式 01 décembre 20。它纯粹是 i18n 替换，尚未完成。

Answer 1

我确实添加了额外的代码，但是我现在意识到如果你使用 ivy - (tsconfig.json - angularCompilerOptions - "enableIvy": false) 那么它在运行时显然不能使用上面的代码。

我已经阅读了关于他们为 i18n 所做的更改的常春藤文档，我可以看到他们只是不打算在运行时更改翻译。

我关闭了 ivy，旧代码现在可以使用了。

我能理解他们的推理，但我不能对每种语言有不同的 url，所以这是我唯一的选择。

Angular 11（或 9+）I18n 在启动时设置语言环境

Angular 11 (or 9+) I18n set Locale at startup

angular

angular11