Angular i18n - 动态加载翻译答案

【问题标题】：Angular i18n - dynamically load translationAngular i18n - 动态加载翻译
【发布时间】：2020-07-15 16:55:47
【问题描述】：

我需要为我的 Angular 应用程序异步加载翻译。我正在尝试使用 @angular/localize 模块中的 loadTranslations 函数。问题是它只有在我把它放在底部的polyfills.ts 文件中才有效。我需要使用 ajax 请求加载这些数据，所以我想延迟引导应用程序直到那个。这是来自main.ts的代码

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

import '@angular/localize/init';

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

// delay from ajax call
setTimeout(() => {
  loadTranslations({
    'test': '123'
  });

  if (environment.production) {
    enableProdMode();
  }
  
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));
}, 1000);

应用程序启动时没有错误，但未应用翻译。如果我删除异步延迟，它也不起作用：

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

import '@angular/localize/init';

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

loadTranslations({
  'test': '123'
});

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

但如果我将 i18n 代码移动到 polyfills.ts（仅限同步版本），它会起作用

import '@angular/localize/init';

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

loadTranslations({
  'test': '123'
});

这是一个示例模板

<p i18n="@@test">Not working</p>

为什么它只适用于polyfills.ts 而不适用于main.ts，有没有办法异步初始化它？

【问题讨论】：

标签： angular typescript localization internationalization angular-i18n

【解决方案1】：

如果您需要动态加载翻译，您需要：

i18n.addResourceBundle(languageCode, 'translation', resources, true, true);

地点：

languageCode： 2 个字符代表字符串（即 en 表示英语）。
'translation'： i18n 中翻译的默认命名空间。
resources： json，包含翻译的键值对。
true,true 用于深度和覆盖选项。

之后别忘了更新语言：

i18n.changeLanguage(languageCode);

请注意，此代码是从 React 项目复制的，角度版本可能具有不同的方法名称但逻辑相似。

【讨论】：