Question

当我尝试使用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” （“[ERROR - ＆gt;] {{value}}

Answer 1

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

这里有plunker来说明问题。

Answer 2

以下是您尝试实现的功能示例：plnkr link

看起来您必须设置文档区域设置，以及一些额外的代码，以便在app/i18n-providers.ts

中获取正确的本地化

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

2 个答案: