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

这个问题发生在任何嵌套的 HTML 标记中，父标记正在被翻译。

Answer 1

我假设您要在提供的示例中翻译的是单词 "Instagram"。如果是这样，根据文档，您有两个选择：

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

 <ng-container i18n="instagram-widget.instagram|Instagram name in the foot gallery @@instagramInstagramWidget"> Instagram <ng-container> 

您可以像这样在评论中包含要翻译的词：

  Instagram  

Answer 2

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

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

Angular 使用这个占位符来避免翻译者错误地修改你的 HTML 标签，在翻译过程中 angular 将这个占位符标签替换为视图中的原始标签(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>

Angular 2 条带有 HTML 标签的 i18n 消息

Angular 2 i18n message with HTML tag inside

internationalization

angular-i18n

angular2-aot

angular

angular-aot