使用 i18n 翻译 Angular 2 中的数据绑定文本答案

【问题标题】：Translating data-bound text in Angular 2 with i18n使用 i18n 翻译 Angular 2 中的数据绑定文本
【发布时间】：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" 的翻译不可用 ("[错误 ->]{{值}}

【问题讨论】：

标签： javascript angular data-binding internationalization

【解决方案1】：

您目前无法在运行时翻译字符串。它经过预处理以在 html 中传递翻译后的字符串。如果 Angular 能够提供一个管道来使用 .xlf 转换来处理绑定的字符串变量，那就太好了。对我来说似乎是一个很大的差距。

这里有一个plunker 来说明问题。

【讨论】：

感谢您的信息。我在这个问题上打了一段时间，没有成功。最后我选择了ng2-translate，而不是推荐的方式。它就像一个魅力，因为它使用管道来触发你提到的翻译。

【解决方案2】：

这是您想要实现的功能示例：plnkr link

看起来您必须设置文档区域设置，以及一些额外的代码来获取 app/i18n-providers.ts 中的正确本地化

【讨论】：

@Dralac：感谢您修复链接，但这并不能解决问题。问题在于绑定数据，Html 文件中的“{{value}}”搞砸了翻译器。
从昨天开始有新的 ng2 版本，他们修复了一些与 i18n 相关的错误。你可以试一试。 see changelog