4

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

此问题发生在正在翻译父级的任何嵌套 HTML 标记中。

4

3 回答 3

3

我假设您在提供的示例中要翻译的是“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>

于 2017-08-08T09:47:27.320 回答
1

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

翻译人员删除占位符标签 () 并只留下纯文本，我所做的是手动查看所有翻译字符串并在原来的位置添加占位符。

Angular 使用此占位符来避免翻译人员错误地修改您的 HTML 标签，在翻译过程中，Angular 会使用此占位符标签并将其替换为视图中的原始标签（https://github.com/angular/angular/issues/18302）

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

于 2017-08-08T19:36:20.997 回答
0

您可以将其包装在标签中。

 <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>
于 2019-03-19T15:02:14.647 回答