我在这里阅读了整个文档: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>
我是否要做这样的事情来处理变量的多种可能性?
<?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 服务接受新配置。
再次更新 :
让ng serve --configuration=fr
工作
您必须进一步编辑angular.json
,官方文档中没有指定,但他们确实在这里谈论它:https://github.com/angular/angular-cli/wiki/stories-internationalization
好吧,我添加了一个<target>Title</target>
它有效,但这当然意味着现在var的每个值无论如何都会返回"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>
那么现在怎么办?如何翻译传递到放置区的消息?
这个 polyfill 似乎是现在最好的方式 - 它主要由负责 i18n 的 Angular 团队成员 Olivier Combe 编写:
https://github.com/ngx-translate/i18n-polyfill
对于 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
我让 polyfill 适用于JIT 和 AOT 编译,适用于 Angular 5(它也适用于 Angular 6)。以下是您需要执行的操作才能翻译成一种语言(这是使其正常工作的好方法 - 然后您可以稍后使用多种语言):
有关使用 AOT 编译的说明:如果使用 AOT 编译来 翻译您的模板,翻译 .ts 文件中的消息 仍将在运行时使用 JIT 编译完成(这就是为什么你 需要引用
TRANSLATIONS
和TRANSLATIONS_FORMAT
而不仅仅是 在构建脚本中注册它们)。
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 定义(即指定翻译"源"id、含义、描述),如下所示:
this.i18n({value: 'Some message', id: 'Some message id', meaning: 'Meaning of some message', description: 'Description of some message'})
您仍然需要提取消息,您可以使用 ngx 提取器工具来执行此操作。请参阅填充代码页面上的自述文件。
所有这些都与 xliffmerge 兼容,这是一个很棒的工具,可以自动合并您添加的任何新翻译,而不会覆盖现有翻译。Xliffmerge还可以使用谷歌翻译自动执行翻译(你需要一个谷歌翻译API密钥)。为此,在进行实际的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",
此填充的当前状态:
这主要由负责 i18n 的 Angular 团队成员 Olivier Combe 撰写。在这个阶段,这是一个"推测性"polyfill,用于翻译.ts文件中的变量或字符串。它很可能会被内置在Angular中的API所取代,这将非常相似,因此以后的升级应该是合理的管理。这是来自Github页面的声明者:
这个库是一个推测性填充,这意味着它应该 替换将来即将推出的 API。 如果 API 不同,则在可能且必要的情况下,将提供迁移工具。
关于即将推出的 Angular 6 次要版本中对代码中变量/字符串翻译的支持进行了一些讨论。
以下是Olivier Combe(今年三月)在Github上的以下讨论中的一句话:
https://github.com/angular/angular/issues/11405
运行时 i18n 的第一个 PR 已合并到 master 中,以及 一个 Hello World 演示应用程序,我们将使用它来测试功能。它有效 在运行时,并支持理论上的代码翻译,即使有 还没有服务。目前,它是非常少的支持(静态 字符串),我们正在努力添加新功能(我将使 下周的提取工作,然后是带有占位符的动态字符串 和变量)。之后,我们将进行代码翻译服务。 一旦新功能完成,它就会合并到master中,你 不必等待新的专业。
鉴于官方说明"翻译复数和选择表达式",(概述)你不能做吗?
<div class="title-text" i18n>{currentpage, select, title1 {title1} title2 {title2} unknowntitle {unknowntitle}}</div>