内部带有 HTML 标记的 Angular 2 i18n 消息

Question

我正在尝试使用 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 语言环境创建了一个翻译文件，当我使用新语言环境为我的应用程序提供服务时， Font Awesome 图标丢失，只显示文本 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>