带有HTML标记的Angular 2 i18n消息

Question

我试图翻译我的应用程序使用角度2的i18n官方实现：https://angular.io/guide/i18n和我试图用HTML翻译一些消息（字体真棒图标让我们说）。

例如：

<p i18n="instagram-widget.instagram|Instagram name in the foot gallery @@instagramInstagramWidget"
  class="text-muted text-center">
  <i class="fa fa-instagram fa-lg mx-1" aria-hidden="true"></i> 
  Instagram
</p>

当我使用ng xi18n或./node_modules/.bin/ng-xi18n生成翻译文件时，我得到以下翻译单元。

<x id="START_ITALIC_TEXT" ctype="x-i"/><x id="CLOSE_ITALIC_TEXT" ctype="x-i"/> Instagram

我为es locale创建了一个翻译文件，当我使用新的语言环境提供我的app时，缺少字体真棒图标，只显示文本instagram。

在翻译父级的任何嵌套HTML标记中都会出现此问题。

Answer 1

我假设你想要在提供的例子中翻译的是“Instagram”这个词。如果是这样，根据文档您有两个选项：

• 您可以将要下载的文本包装在ng-container标记中

<p class="text-muted text-center">
  <i class="fa fa-instagram fa-lg mx-1" aria-hidden="true"></i> 
  <ng-container i18n="instagram-widget.instagram|Instagram name in the foot gallery @@instagramInstagramWidget">
    Instagram
  <ng-container>
</p>

• 你可以在这样的评论中包含要翻译的单词：

<p class="text-muted text-center">
  <i class="fa fa-instagram fa-lg mx-1" aria-hidden="true"></i> 
  <!-- i18n: instagram-widget.instagram|Instagram name in the foot gallery@@instagramInstagramWidget -->
Instagram
<!--/i18n-->
</p>

Answer 2

问题与我正在使用的翻译有关。

翻译器删除占位符标签（）并仅保留纯文本，我所做的是手动查看所有翻译字符串并添加最初的占位符。

Angular使用这个占位符来避免翻译者错误地修改HTML标记，在翻译过程中角取这个占位符标记并将其替换为视图中的原始标记（https://github.com/angular/angular/issues/18302）

我找不到（还）一个不删除这些占位符的翻译工具

Answer 3

你可以将它包装在一个标签中。

 <p class="signupLink">
    <span i18n="@@loginPageNewAtProof">New at Proof?</span>
    <span i18n="@@loginPageSignupHereProof"><a routerLink="/signup">Signup here</a></span>
  </p>

然后

  <trans-unit id="loginPageNewAtProof" datatype="html">
      <source>New at Proof?</source>
      <target>Nouveau chez Proof?</target>
</trans-unit>

<trans-unit id="loginPageSignupHereProof" datatype="html">
      <source>Signup here</source>
      <target>Inscrivez-vous ici</target>
</trans-unit>