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 = zh-cn 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 = zh-cn datatype = plaintext original = ng2.template>
< body>
< trans-unit id = myId datatype = html>
< source>标题1< / source>
< target"滴度1< / target>
< source>帮助2< / source>
< target>助手2< / target>
< source>新建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>当前路线的标题< / note>
< / trans-unit>
< / body>
< / file>
< / xliff>
非常确定 equiv-text = {{currentPage}} 是垃圾。但它可能尚需测试。同时，我无法让
接受新的配置。
再次更新：
要获得 ng服务--configuration = fr 才能工作
您必须编辑 angular.json ，在官方文档中未指定，但他们确实在这里谈论： https://github.com/angular/angular-cli/wiki/stories-internationalization
我添加了< target>标题// target< / target> ，它可以正常工作，但是当然，这意味着现在var的每个值无论如何都返回 title。 / p>
在将 i18n 标记无处不在时，我在我的代码中遇到了这个问题：
< dropzone [message] = valid？''：'Placez ici votre fichier Excel csvàAjouter aux lignes ci-dessous。（Ces lignesapparaîtrontà la fin de la table）'（成功）= uploa ded（）< / dropzone>
那又如何？我该如何翻译传递到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
我在Angular 5的JIT和AOT编译中都使polyfill工作 （在Angular 6上也可以工作）。这是将您的语言翻译成一种语言所需的操作（这是一种很好的工作方式-您以后可以使用多种语言）：
使用AOT编译的注意事项：如果您正在使用AOT编译来转换
的模板，则 .ts文件
中消息的转换仍将在运行时使用JIT完成。编译（这就是为什么您
需要引用TRANSLATIONS和TRANSLATIONS_FORMAT而不是$ b的原因$ b在您的构建脚本中注册它们。）
app.module.ts
将以下导入项添加到根Angular模块中：
import { TRANSLATIONS，TRANSLATIONS_FORMAT}来自 @ angular / core；从 @ ngx-translate / i18n-polyfill导入
{I18n}；
添加以下常量，并在根模块中指定提供程序：
//在导入和导出语句
之后添加它//您需要指定翻译文件的位置
//这是.ts文件中将用于翻译的翻译文件
const translations = require（`raw-loader！../ locale / messages.fr.xlf`）;
@NgModule（{....
提供者：
[
I18n，
{提供：翻译，useValue：翻译} ，
{提供：TRANSLATIONS_FORMAT，useValue：'xlf'}，
...
*。ts
在要提供翻译的.ts文件中，添加以下内容：
从'@ ngx-translate / i18n-polyfill'导入{I18n};
构造函数（私有i18n ：I18n）{
console.log（i18n（这是一个测试{{myVar}}！，{myVar： ^ _ ^}））;
}
这表明您甚至可以在要翻译的消息中包括插值。
您可以像这样使用i18n定义（即，使用翻译'source'id，含义，描述）：
this.i18n（{value：'Some message'，id：'Some message id'，意思是：'某些消息的含义'，描述：'某些消息的描述'}）
您仍然需要提取邮件，并且可以使用ngx提取器工具来执行此操作。请参阅 polyfill页面上的自述文件。
所有这些都与 xliffmerge ，这是一个很好的工具，它可以自动合并您添加的所有 new 翻译，而不会覆盖现有翻译。 Xliffmerge还可以使用Google翻译自动执行翻译（您需要使用Google翻译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，
生成新-translations： xliffmerge --profile xliffmerge.json zh zh zhe
AOT版本该网站的特定语言版本看起来像这样：
build：fr： ng build --aot- output-path = dist / fr --base-href / fr / --i18nFile = src / locale / messages.fr.xlf --i18nFormat = xlf --locale = fr，
此polyfill的当前状态：
这主要是由成员Olivier Combe撰写的负责i18n的Angular团队的成员。在此阶段，这是一个推测性 polyfill，用于翻译.ts文件中的变量或字符串。它很可能会被Angular内置的API取代，该API非常相似，因此以后的升级应该可以合理管理。以下是Github页面上的免责声明：
该库是一个推测性的polyfill，这意味着应该用
替换API将来会出现。
如果API不同，则将在可能和必要的情况下提供迁移工具。
支持即将发布的Angular 6的次要版本，用于代码中变量/字符串的翻译。
这里是Olivier Combe（从今年3月开始）的引文，摘自以下讨论Github：
https：// github .com / angular / angular / issues / 11405
运行时i18n的第一个PR已合并到master中，
a hello世界演示应用程序，我们将使用它来测试功能。它在运行时可以运行
，并且即使没有
的服务，理论上也支持代码翻译。现在，它的支持非常少（静态
字符串），我们正在努力添加新功能（下周将使
提取工作，然后是带有占位符
和变量的动态字符串）。之后，我们将提供代码翻译服务。
新功能完成后，它就会合并到母版中，您
不必等待新的专业。
I've read the entire doc here : https://angular.io/guide/i18n
I can't make heads or tails of how I'm supposed to handle a html tag of this nature :
<div i18n="@@myId" class="title-text">{{currentPage}}</div>
or one like this :
<div i18n="@@myId" class="title-text" [innerHTML]="currentPage"></div>
it doesn't mention any variable text at all as if they just assume we'd have all our names and text hard coded into the html.
a language file is supposed to look like this :
<?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>
Am I to do something like this to handle the multiple possibilities of the 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>
I don't think that'll work. How do I handle variables?
UPDATE :
if I use their language file generation tool :
ng xi18n --output-path locale --out-file english.xlf --i18n-locale fr
I get :
<?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>
pretty sure equiv-text="{{currentPage}}" is garbage. but It may yet work need to test.
in the meantime I can't get ng serve to accept the new configs.
UPDATE AGAIN :
to get ng serve --configuration=fr to work
you have to edit angular.json further, it's not specified in the official docs but they do talk about it here : https://github.com/angular/angular-cli/wiki/stories-internationalization
Well I added a <target>Title</target> and it works but of course this implies that right now every single value for the var returns "title" no matter what.
also upon placing the i18n tags everywhere, I ran into this in my code :
<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>
so what now? how do I translate the message passed to the dropzone?
This polyfill seems like the best way to go right now - it's mainly written by Olivier Combe, a member of the Angular team responsible for i18n:
https://github.com/ngx-translate/i18n-polyfill
For Angular 5, you'll need version 0.2.0 when you install:
npm install @ngx-translate/i18n-polyfill@0.2.0 --save
For Angular 6, get the latest version - currently 1.0.0:
npm install @ngx-translate/i18n-polyfill@1.0.0 --save
I got the polyfill working for both JIT and AOT compilation, for Angular 5 (it will also work for Angular 6). Here's what you need to do to translate to a single language (this is a good way to get this working - you can then get multiple languages working later):
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
Add the following imports to your root Angular module:
import { TRANSLATIONS, TRANSLATIONS_FORMAT } from '@angular/core';
import { I18n } from '@ngx-translate/i18n-polyfill';
add the following constant, and specify the providers in your root module:
// 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
In the .ts file where you want to provide a translation, add this:
import { I18n } from '@ngx-translate/i18n-polyfill';
constructor(private i18n: I18n) {
console.log(i18n("This is a test {{myVar}} !", {myVar: "^_^"}));
}
This demonstrates that you can even include interpolations in the messages that you want to translate.
You can use i18n definitions (i.e. using specifying the translation 'source' id, meaning, description) like this:
this.i18n({value: 'Some message', id: 'Some message id', meaning: 'Meaning of some message', description: 'Description of some message'})
You'll still need to extract the messages, and you can use the ngx-extractor tool to do this. See the readme on the polyfill page.
All of this is compatible with xliffmerge, which is a great tool for automatically merging any new translations you add, without overwriting existing translations. Xliffmerge can also automatically perform translations using Google translate (you'll need a Google translate API key). For this to work, I do the extraction and merging/translation in the following order, before I do the actual AOT build:
"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"
The AOT build for a specific language version of the site looks like this:
"build:fr": "ng build --aot --output-path=dist/fr --base-href /fr/ --i18nFile=src/locale/messages.fr.xlf --i18nFormat=xlf --locale=fr",
Current status of this polyfill:
This is mainly written by Olivier Combe, a member of the Angular team responsible for i18n. At this stage this it's a 'speculative' polyfill for translating variables or strings in the .ts file. It's likely to be replaced by an API built into Angular which will be very similar, so upgrading later should be reasonably manageable. Here's the diclaimer from the Github page:
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.
There's been some discussion around support in forthcoming minor versions of Angular 6 for translations of variables/strings in code.
Here's a quote from Olivier Combe (from March this year), from the following discussion on 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.
这篇关于angular-i18n Angular 6国际化：如何处理变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
