使用 i18n 翻译 Angular 2 中的数据绑定文本
Posted
技术标签:
【中文标题】使用 i18n 翻译 Angular 2 中的数据绑定文本【英文标题】：Translating data-bound text in Angular 2 with i18n 【发布时间】：2017-03-10 08:39:06 【问题描述】：当我尝试使用 i18n 将英语翻译成法语时，按照 https://angular.io/docs/ts/latest/cookbook/i18n.html 的国际化教程逐字逐句地进行操作，一切正常。
但是当我尝试使用 Angular 2 的数据绑定将可变文本插入 HTML 时，它就停止了工作。
这是我的 HTML：
<h1 i18n="User welcome|An introduction header for this sample">value</h1>
这是我的组件：
import Component from '@angular/core';
@Component(
moduleId: module.id,
selector: 'my-app',
templateUrl: 'app.component.html'
)
export class AppComponent
public value = "Hello i18n!";
这是我的 XLF 文件：
<?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="af2ccf4b5dba59616e92cf1531505af02da8f6d2" datatype="html">
<source>Hello i18n!</source>
<target>Bonjour i18n!</target>
<note priority="1" from="description">An introduction header for this sample</note>
<note priority="1" from="meaning">User welcome</note>
</trans-unit>
</body>
</file>
</xliff>
这是错误：
zone.js@0.6.25:357 错误：未捕获（承诺中）：错误：模板解析 错误： 消息 id="95184d0fe43359bff724d20df3a1317aef86799c" 的翻译不可用 ("[错误 ->]值
【问题讨论】：
【参考方案1】：您目前无法在运行时翻译字符串。它经过预处理以在 html 中传递翻译后的字符串。如果 Angular 能够提供一个管道来使用 .xlf 转换来处理绑定的字符串变量，那就太好了。对我来说似乎是一个很大的差距。
这里有一个plunker 来说明问题。
【讨论】：
感谢您的信息。我在这个问题上打了一段时间，没有成功。最后我选择了ng2-translate，而不是推荐的方式。它就像一个魅力，因为它使用管道来触发你提到的翻译。【参考方案2】：这是您想要实现的功能示例：plnkr link
看起来您必须设置文档区域设置，以及一些额外的代码来获取 app/i18n-providers.ts 中的正确本地化
【讨论】：
@Dralac：感谢您修复链接，但这并不能解决问题。问题在于绑定数据，Html 文件中的“value”搞砸了翻译器。 从昨天开始有新的 ng2 版本，他们修复了一些与 i18n 相关的错误。你可以试一试。 see changelog以上是关于使用 i18n 翻译 Angular 2 中的数据绑定文本的主要内容，如果未能解决你的问题，请参考以下文章