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创建了一个翻译文件，当我使用新的语言环境提供我的应用程序时，缺少字体真棒图标，只显示文本instagram。

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

Answer 1

我认为你想要在提供的例子中翻译的是＆＃34; Instagram＆＃34;。如果是这样，根据文档有两个选项：

• 您可以将要下载的文本包装在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

you can wrap it in a tag.

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

then

  <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>