ngx-translate：在HTML中翻译字符串

Question

我正在使用ngx-translate库来支持我的Angular应用中的国际化（I18N）。 有人能帮我标记下面的html片段以进行翻译吗？

<span *ngIf="Days < 0 && !shortSentence">
      Follow-up is <span [class.font-bold]="highlightContent">{{ InDays | positiveNumber }} days</span> past due
    </span>

我希望只标记span标签内的文本内容。如何将其作为参数化翻译？

任何帮助都将不胜感激。

提前致谢。

- user2439903

Answer 1

以下是如何使用参数化翻译和过滤器的方法：

// define translation with parameter
'TRANSLATION_KEY': '{{days}} days'

// use it in template
<span>{{ 'TRANSLATION_KEY' | translate: { days: followUpInDays | positiveNumber } }}</span>

如果您想将整个句子作为翻译（包括HTML）返回，您需要使用 innerHTML 属性绑定：

// define translation with parameter
'TRANSLATION_KEY': 'Follow-up is <span class="{{className}}">{{days}} days</span> past due'

// use it in template
<span *ngIf="Days < 0 && !shortSentence"
      [innerHTML]="'TRANSLATION_KEY' | translate: { className: (highlightContent ? 'font-bold' : ''), days: followUpInDays | positiveNumber }">
</span>

- Martin Adámek

---

我在UI中获得以下输出：““跟进已逾期 {days} 天””。表达式 {days} 没有被评估。如何解决这个问题？ - user2439903

在定义翻译参数时，您需要使用双大括号（我的错，因为我在后台使用messageformat，所以单个大括号对我也有效）。 - Martin Adámek

显然，innerHTML属性在IE11中不起作用 - 很明显......微软和他们的烂浏览器..... - schankam