angular-i18n Angular 6 国际化：如何处理变量
angular-i18n Angular 6 Internationalisation : How to deal with variables
我在这里阅读了整个文档：https://angular.io/guide/i18n
我不知道应该如何处理这种性质的 html 标签：
<div i18n="@@myId" class="title-text">{{currentPage}}</div>
或这样的一个：
<div i18n="@@myId" class="title-text" [innerHTML]="currentPage"></div>
它根本没有提到任何可变文本，就好像他们只是假设我们已经将我们所有的名字和文本硬编码到 html.
语言文件应该如下所示：
<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
<file source-language="en" datatype="plaintext" original="ng2.template">
<body>
<trans-unit id="myId" datatype="html">
<source>Hello</source>
<target>Bonjour</target>
</trans-unit>
</body>
</file>
</xliff>
我是否要做这样的事情来处理 var 的多种可能性？
<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
<file source-language="en" datatype="plaintext" original="ng2.template">
<body>
<trans-unit id="myId" datatype="html">
<source>Title 1</source>
<target>Titre 1</target>
<source>Help 2</source>
<target>Aide 2</target>
<source>New 3</source>
<target>Nouveau 3</target>
</trans-unit>
</body>
</file>
</xliff>
我认为这行不通。我如何处理变量？
更新：
如果我使用他们的语言文件生成工具：
ng xi18n --output-path locale --out-file english.xlf --i18n-locale fr
我得到：
<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
<file source-language="fr" datatype="plaintext" original="ng2.template">
<body>
<trans-unit id="9f3e56faa6da73b83f4646a1e074b970891894da" datatype="html">
<source><x id="INTERPOLATION" equiv-text="{{currentPage}}"/></source>
<context-group purpose="location">
<context context-type="sourcefile">app/logged.in/top.bar/top.bar.component.ts</context>
<context context-type="linenumber">85</context>
</context-group>
<note priority="1" from="description">the title of the current route</note>
</trans-unit>
</body>
</file>
</xliff>
很确定 equiv-text="{{currentPage}}" 是垃圾。但它可能还需要测试。
与此同时，我无法让 ng serve 接受新配置。
再次更新：
让 ng serve --configuration=fr 工作
你必须进一步编辑 angular.json，官方文档中没有指定，但他们确实在这里讨论过：https://github.com/angular/angular-cli/wiki/stories-internationalization
好吧，我添加了一个 <target>Title</target> 并且它起作用了，但是当然这意味着现在 var returns "title" 的每个值都无论如何。
同样在到处放置 i18n 标签后，我 运行 在我的代码中加入了这个：
<dropzone [message]="valid? '' : 'Placez ici votre fichier Excel csv à Ajouter aux lignes ci-dessous. (Ces lignes apparaîtront à la fin de la table)'" (success)="uploaded()"></dropzone>
那现在呢？我如何运行将传递到 dropzone 的消息设置为石板？
这个 polyfill 似乎是目前最好的方式 - 它主要由 Olivier Combe 编写，他是 Angular 团队负责 i18n 的成员：
https://github.com/ngx-translate/i18n-polyfill
对于Angular 5，安装时需要0.2.0版本：
npm install @ngx-translate/i18n-polyfill@0.2.0 --save
对于Angular6，获取最新版本-当前为1.0.0:
npm install @ngx-translate/i18n-polyfill@1.0.0 --save
我让 polyfill 用于 JIT 和 AOT 编译，用于 Angular 5（它也适用于 Angular 6）。以下是翻译成一种语言所需要做的事情（这是实现这一目标的好方法 - 稍后您可以翻译成多种语言）：
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
registering them in your build scripts).
app.module.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'},
...
*.ts
在要提供翻译的 .ts 文件中，添加：
import { I18n } from '@ngx-translate/i18n-polyfill';
constructor(private i18n: I18n) {
console.log(i18n("This is a test {{myVar}} !", {myVar: "^_^"}));
}
这表明您甚至可以在要翻译的消息中包含插值。
您可以像这样使用 i18n 定义（即使用指定翻译 'source' id、含义、描述）：
this.i18n({value: 'Some message', id: 'Some message id', meaning: 'Meaning of some message', description: 'Description of some message'})
您仍然需要提取消息，您可以使用 ngx-extractor 工具来执行此操作。请参阅 polyfill page.
上的自述文件
所有这些都与 xliffmerge 兼容，这是一个很好的工具，可以自动合并您添加的任何 新 翻译，而不会覆盖现有翻译。 Xliffmerge 还可以使用 Google translate 自动执行翻译（您需要 Google translate API 键）。为此，我按以下顺序进行提取和 merging/translation， 在 之前我进行实际的 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编写。在这个阶段，这是一个 'speculative' 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 次要版本中对代码中 variables/strings 的翻译的支持进行了一些讨论。
这是 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.
鉴于官方说明“translating-plural-and-select-expressions", (overview) 你不能做吗？:
<div class="title-text" i18n>{currentpage, select, title1 {title1} title2 {title2} unknowntitle {unknowntitle}}</div>
我在这里阅读了整个文档：https://angular.io/guide/i18n
我不知道应该如何处理这种性质的 html 标签：
<div i18n="@@myId" class="title-text">{{currentPage}}</div>
或这样的一个：
<div i18n="@@myId" class="title-text" [innerHTML]="currentPage"></div>
它根本没有提到任何可变文本，就好像他们只是假设我们已经将我们所有的名字和文本硬编码到 html.
语言文件应该如下所示：
<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
<file source-language="en" datatype="plaintext" original="ng2.template">
<body>
<trans-unit id="myId" datatype="html">
<source>Hello</source>
<target>Bonjour</target>
</trans-unit>
</body>
</file>
</xliff>
我是否要做这样的事情来处理 var 的多种可能性？
<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
<file source-language="en" datatype="plaintext" original="ng2.template">
<body>
<trans-unit id="myId" datatype="html">
<source>Title 1</source>
<target>Titre 1</target>
<source>Help 2</source>
<target>Aide 2</target>
<source>New 3</source>
<target>Nouveau 3</target>
</trans-unit>
</body>
</file>
</xliff>
我认为这行不通。我如何处理变量？
更新：
如果我使用他们的语言文件生成工具：
ng xi18n --output-path locale --out-file english.xlf --i18n-locale fr
我得到：
<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
<file source-language="fr" datatype="plaintext" original="ng2.template">
<body>
<trans-unit id="9f3e56faa6da73b83f4646a1e074b970891894da" datatype="html">
<source><x id="INTERPOLATION" equiv-text="{{currentPage}}"/></source>
<context-group purpose="location">
<context context-type="sourcefile">app/logged.in/top.bar/top.bar.component.ts</context>
<context context-type="linenumber">85</context>
</context-group>
<note priority="1" from="description">the title of the current route</note>
</trans-unit>
</body>
</file>
</xliff>
很确定 equiv-text="{{currentPage}}" 是垃圾。但它可能还需要测试。
与此同时，我无法让 ng serve 接受新配置。
再次更新：
让 ng serve --configuration=fr 工作
你必须进一步编辑 angular.json，官方文档中没有指定，但他们确实在这里讨论过：https://github.com/angular/angular-cli/wiki/stories-internationalization
好吧，我添加了一个 <target>Title</target> 并且它起作用了，但是当然这意味着现在 var returns "title" 的每个值都无论如何。
同样在到处放置 i18n 标签后，我 运行 在我的代码中加入了这个：
<dropzone [message]="valid? '' : 'Placez ici votre fichier Excel csv à Ajouter aux lignes ci-dessous. (Ces lignes apparaîtront à la fin de la table)'" (success)="uploaded()"></dropzone>
那现在呢？我如何运行将传递到 dropzone 的消息设置为石板？
这个 polyfill 似乎是目前最好的方式 - 它主要由 Olivier Combe 编写，他是 Angular 团队负责 i18n 的成员：
https://github.com/ngx-translate/i18n-polyfill
对于Angular 5，安装时需要0.2.0版本：
npm install @ngx-translate/i18n-polyfill@0.2.0 --save
对于Angular6，获取最新版本-当前为1.0.0:
npm install @ngx-translate/i18n-polyfill@1.0.0 --save
我让 polyfill 用于 JIT 和 AOT 编译，用于 Angular 5（它也适用于 Angular 6）。以下是翻译成一种语言所需要做的事情（这是实现这一目标的好方法 - 稍后您可以翻译成多种语言）：
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
TRANSLATIONSandTRANSLATIONS_FORMATinstead of just registering them in your build scripts).
app.module.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'},
...
*.ts
在要提供翻译的 .ts 文件中，添加：
import { I18n } from '@ngx-translate/i18n-polyfill';
constructor(private i18n: I18n) {
console.log(i18n("This is a test {{myVar}} !", {myVar: "^_^"}));
}
这表明您甚至可以在要翻译的消息中包含插值。
您可以像这样使用 i18n 定义（即使用指定翻译 'source' id、含义、描述）：
this.i18n({value: 'Some message', id: 'Some message id', meaning: 'Meaning of some message', description: 'Description of some message'})
您仍然需要提取消息，您可以使用 ngx-extractor 工具来执行此操作。请参阅 polyfill page.
上的自述文件所有这些都与 xliffmerge 兼容，这是一个很好的工具，可以自动合并您添加的任何 新 翻译，而不会覆盖现有翻译。 Xliffmerge 还可以使用 Google translate 自动执行翻译（您需要 Google translate API 键）。为此，我按以下顺序进行提取和 merging/translation， 在 之前我进行实际的 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编写。在这个阶段，这是一个 'speculative' 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 次要版本中对代码中 variables/strings 的翻译的支持进行了一些讨论。
这是 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.
鉴于官方说明“translating-plural-and-select-expressions", (overview) 你不能做吗？:
<div class="title-text" i18n>{currentpage, select, title1 {title1} title2 {title2} unknowntitle {unknowntitle}}</div>