angular-i18n解决方法是代码翻译？ [英] angular-i18n work-around for translations in code?
问题描述
我们必须等到Angular 6才能使用angular-i18n来支持错误消息等代码的翻译。
We have to wait until Angular 6 for angular-i18n to support translations in code for error messages and such.
对于那些使用angular-i18n的用户（相反（例如ngx-translate）您在做什么同时处理代码中的翻译？在我看来，如果字符串不多，那么一个简单的语言服务就可以通过语言代码和id进行翻译，但是我对更优雅和成角度的东西感兴趣。
For those that are using angular-i18n (instead of ngx-translate for instance) what are you doing in the meantime to handle translations in code? It occurs to me that if there are not many strings then a simple language service with methods to get translations by language code and an id would work, but I am interested in something more elegant and "angular".
我不知道承诺的代码转换支持会是什么样子，但是理想情况下，任何临时解决方案在上线时都可以轻松转换为angular-i18n方式。
I do not know what the promised code translations support will look like but any temporary solution would ideally be easily converted to the angular-i18n way when it goes live.
人们在做什么来解决这个问题？有想法吗？
What are people out there doing to handle this issue? Any ideas?
推荐答案
这种polyfill似乎是现在最好的选择：
This polyfill seems like the best way to go right now:
https://github.com/ngx-translate/i18n-polyfill
它允许您将要翻译的任何内容包装在 i18n（）函数中（该API可能将在以后的Angular版本中保留-请参阅我在此答案底部的注释。）
It allows you to wrap anything you want to translate in an i18n() function (this API is likely to be preserved in a future release of Angular - see my notes at the bottom of this answer).
polyfill主要由Angular的成员Olivier Combe编写负责i18n的团队：
The polyfill is mainly written by Olivier Combe, a member of the Angular team responsible for i18n:
对于Angular 5，安装时需要版本0.2.0：
For Angular 5, you'll need version 0.2.0 when you install:
npm install @ ngx-translate / i18n-polyfill @ 0.2.0 --save
对于Angular 6，获取最新版本-当前为1.0.0：
For Angular 6, get the latest version - currently 1.0.0:
npm install @ ngx-translate / i18n -polyfill@1.0.0 --save
我让JIT和AOT公司的polyfill工作 ，适用于Angular 5（也适用于Angular 6）。这是将您的语言翻译成一种语言所需的操作（这是一种很好的工作方式-您以后可以使用多种语言，我将在后面进行解释）：
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, which I explain further down):
将以下导入项添加到根Angular模块中：
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'},
...
使用AOT编译的注意事项：如果使用AOT编译到
来翻译模板，请翻译.ts文件中的消息
仍将在运行时使用JIT编译完成（这就是为什么
需要引用TRANSLATIONS和TRANSLATIONS_FORMAT而不是仅在构建脚本中指定这些内容的
）。
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 specifying these in your build scripts).
*。ts
在要提供翻译的.ts文件中，添加以下内容：
*.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.
您可以使用i18n定义（即使用这样指定翻译的源 id，含义，描述）：
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'})
您仍然需要提取消息，并且可以使用ngx-extractor工具执行此操作。当您安装polyfill时，这是包括在内的。下面，我在npm脚本中添加了有关其用法的示例。另请参见 polyfill页面上的自述文件。
You'll still need to extract the messages, and you can use the ngx-extractor tool to do this. This is included when you install the polyfill, and I've added an example below on its usage inside an npm script. See also the readme on the polyfill page.
要支持多种语言之间的切换，您需要您翻译的工厂提供者。有关 polyfill页面的自述文件的详细信息。您的根模块中将需要类似的内容（或用于AOT编译，请使用检测应用程序的哪个AOT编译语言变体为函数替换 localeFactory 的返回值。当前正在运行）：
To support switching between multiple languages, you'll need a factory provider for your translations. There are details on the readme of the polyfill page. You'll need something like this in your root module (or for AOT compilation, replace the return value for localeFactory with a function that detects which AOT compiled language variant of your app is currently running):
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 ，这是一个很好的工具，它可以自动合并您添加的所有 new 翻译，而不会覆盖现有翻译。 Xliffmerge还可以使用Google翻译自动执行翻译（您需要使用Google翻译API密钥）。为此，我按以下顺序进行提取和合并/翻译，在进行实际的AOT构建之前，先进行 ：
Message extraction and xliffmerge
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"
AOT版本该网站的特定语言版本看起来像这样：
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",
此polyfill的当前状态：
这主要是由负责i18n的Angular团队成员Olivier Combe撰写的。在此阶段，这是一个推测性 polyfill，用于翻译.ts文件中的变量或字符串。它很可能会被Angular内置的API取代，该API非常相似，因此以后的升级应该可以合理管理。以下是Github页面上的免责声明：
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:
该库是一个推测性的polyfill，这意味着应该用
替换API将来会出现。
如果API不同，则将在可能和必要的情况下提供迁移工具。
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的次要版本，用于代码中变量/字符串的翻译。
There's been some discussion around support in forthcoming minor versions of Angular 6 for translations of variables/strings in code.
这里是Olivier Combe（从今年3月开始）的引文，摘自以下讨论Github：
Here's a quote from Olivier Combe (from March this year), from the following discussion on Github:
https：// github。 com / angular / angular / issues / 11405
运行时i18n的第一个PR与$一起合并到master中b $ ba hello世界演示应用程序，我们将使用它来测试功能。它在运行时可以运行
，并且即使没有
的服务，理论上也支持代码翻译。现在，它的支持非常少（静态
字符串），我们正在努力添加新功能（下周将使
提取工作，然后是带有占位符
和变量的动态字符串）。之后，我们将提供代码翻译服务。
新功能完成后，它就会合并到母版中，您
不必等待新的专业。
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解决方法是代码翻译？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
