angular-i18n 解决代码翻译问题？

Question

我们必须等到 Angular 6 才能让 angular-i18n 支持错误消息等代码的翻译。

对于那些使用 angular-i18n(而不是例如 ngx-translate)的人，您同时在做什么来处理代码中的翻译？我突然想到，如果字符串不多，那么一个简单的语言服务可以使用通过语言代码和 id 获取翻译的方法，但我对更优雅和“有 Angular ”的东西感兴趣。

我不知道 promise 的代码翻译支持会是什么样子，但理想情况下，任何临时解决方案在上线时都可以轻松转换为 angular-i18n 方式。

人们正在做什么来处理这个问题？有什么想法吗？

Answer 1

这个 polyfill 似乎是目前最好的方式:

https://github.com/ngx-translate/i18n-polyfill

它允许您将要翻译的任何内容包装在 i18n() 函数中(此 API 可能会保留在 Angular 的 future 版本中 - 请参阅我在该答案底部的注释).

polyfill 主要由负责 i18n 的 Angular 团队成员 Olivier Combe 编写:

---

对于 Angular 5，安装时需要版本 0.2.0:

npm install @ngx-translate/i18n-polyfill@0.2.0 --save

对于 Angular 6，获取最新版本 - 当前为 1.0.0:

npm install @ngx-translate/i18n-polyfill@1.0.0 --save

我得到了适用于 Angular 5 的 polyfill JIT 和 AOT 编译(它也适用于 Angular 6)。以下是翻译成一种语言所需要做的事情(这是实现此目的的好方法 - 稍后您可以让多种语言工作，我将在下面进一步解释):

---

应用程序模块.ts

将以下导入添加到根 Angular 模块:

import { TRANSLATIONS, TRANSLATIONS_FORMAT } from '@angular/core';
import { I18n } from '@ngx-translate/i18n-polyfill';

添加以下常量，并在您的根模块中指定提供程序:

// add this after import + export statements
// you need to specify the location for your translations file
// this is the translations file that will be used for translations in .ts files

const translations = require(`raw-loader!../locale/messages.fr.xlf`);

@NgModule({ ....

  providers:
  [
    I18n,
    {provide: TRANSLATIONS, useValue: translations},
    {provide: TRANSLATIONS_FORMAT, useValue: 'xlf'},
    ...

Note on using AOT compilation: If you're using AOT compilation to translate your templates, translation of the messages in .ts files will still be done at runtime using JIT compilation (that's why you need to reference TRANSLATIONS and TRANSLATIONS_FORMAT instead of just specifying these in your build scripts).

---

*.ts

在要提供翻译的 .ts 文件中，添加以下内容:

import { I18n } from '@ngx-translate/i18n-polyfill';

constructor(private i18n: I18n) {
    console.log(i18n("This is a test {{myVar}} !", {myVar: "^_^"}));
}

这表明您甚至可以在要翻译的消息中包含插值。

您可以像这样使用 i18n 定义(即使用指定翻译“源”id、含义、描述):

this.i18n({value: 'Some message', id: 'Some message id', meaning: 'Meaning of some message', description: 'Description of some message'})

您仍然需要提取消息，您可以使用 ngx-extractor 工具来执行此操作。这在您安装 polyfill 时包含在内，我在下面添加了一个示例，说明它在 npm 脚本中的用法。另请参阅 polyfill page 上的自述文件.

---

多种语言

要支持在多种语言之间切换，您需要一个工厂提供程序来进行翻译。 polyfill page 的自述文件中有详细信息.您需要在根模块中使用类似这样的东西(或者对于 AOT 编译，将 localeFactory 的返回值替换为检测您的应用程序当前运行的 AOT 编译语言变体的函数):

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

---

消息提取和xliffmerge

所有这些都与 xliffmerge 兼容，这是一个很好的工具，可以自动合并您添加的任何新翻译，而不会覆盖现有翻译。 Xliffmerge 还可以使用谷歌翻译自动执行翻译(您需要谷歌翻译 API key )。为此，我按以下顺序进行提取和合并/翻译，在我进行实际的 AOT 构建之前:

"extract-i18n-template-messages": "ng xi18n --outputPath=src/locale --i18n-format=xlf",
"extract-i18n-ts-messages": "ngx-extractor --input=\"src/**/*.ts\" --format=xlf --out-file=src/locale/messages.xlf",
"generate-new-translations": "xliffmerge --profile xliffmerge.json en fr es de zh"

网站特定语言版本的 AOT 构建如下所示:

"build:fr": "ng build --aot --output-path=dist/fr --base-href /fr/ --i18nFile=src/locale/messages.fr.xlf --i18nFormat=xlf --locale=fr",

---

这个polyfill的当前状态:

本文主要由负责国际化的Angular团队成员Olivier Combe编写。在这个阶段，这是一个“推测性”的 polyfill，用于翻译 .ts 文件中的变量或字符串。它很可能会被 Angular 中内置的 API 所取代，这将非常相似，因此以后的升级应该是可以合理管理的。这是来自 Github 页面的免责声明:

This library is a speculative polyfill, it means that it's supposed to replace an API that is coming in the future. If the API is different, a migration tool will be provided if it's possible and necessary.

关于在即将推出的 Angular 6 次要版本中对代码中变量/字符串的翻译的支持存在一些讨论。

这是来自 Olivier Combe(今年 3 月)的引述，来自 Github 上的以下讨论:

https://github.com/angular/angular/issues/11405

The first PR for runtime i18n has been merged into master, along with a hello world demo app that we will use to test the features. It works at runtime, and support theoretically code translations, even if there is no service for it yet. For now it's very minimal support (static strings), we're working on adding new features (I'll make the extraction work next week, and then dynamic string with placeholders and variables). After that we'll do the service for code translations. As soon as a new feature is finished it gets merged into master, you won't have to wait for a new major.