无法使用 i18n 的 Angular 7 中的文件本地化/翻译

Question

我有一个已经构建好的 Angular 7 应用程序。现在我们计划将其支持为多种语言。问题在于我们根据 api 调用在页面上显示的成功/失败消息。 为此，我们使用一个定义了变量 id 的全局文件。如何根据语言环境翻译此文件并在应用程序中使用。 目前我正在导入文件，无论在哪里使用，就像这样。

import { GlobalMsg } from '/globalModule/globalMsg';

并使用errorMsg = GlobalMsg.errorMsg;

文件globalMsg 是这样定义的。

export class GlobalMsg {

    // Global Msgs
    public static errorMsg = 'Some error occured';
}

谢谢。

Answer 1

正如 Ininv 在他的帖子中所说，您可以为每个语言环境定义翻译 JSON 文件，然后使用“翻译”管道翻译字符串。要管理每个翻译，您可以使用 ng-translate，这是一个与 Angular 捆绑在一起的库，用于帮助内部化。

更多信息在这里： https://github.com/ngx-translate/core

Answer 2

不要将翻译后的字符串保存在 GlobalMsg 文件中，而是使用翻译键对其进行更新。

export class GlobalMsg {
  public static errorMsg = "global.errorMsg"
}

在每个语言环境 JSON 的翻译 JSON 文件中，用各自的定义定义这些键

en.json

{
 global.errorMsg: "Invalid data"
}

fr.json

{
 global.errorMsg: "Données invalides"
}

HTML

<p [innerHTML]="errorMsg | translate"></p>

组件

  constructor(private translateService: TranslateService) {
    translateService.addLangs(['en', 'de']);
    translateService.setDefaultLang('en');
  }

  switchLanguage(language: string) {
    this.translateService.use(language);
  }