Angular项目中使用ngx-translate对指定HTML文本做参数化翻译求助

针对你的场景，因为需要给逾期天数部分保留动态加粗样式，我们可以通过拆分翻译文本+参数传递的方式实现，同时不破坏原有的DOM结构。具体步骤如下：

1. 在国际化资源文件中定义翻译键 #

比如在英文资源文件（en.json）中：

{
  "follow_up": {
    "prefix": "Follow-up is",
    "suffix": "days past due"
  }
}

对应的中文资源文件（zh-CN.json）：

{
  "follow_up": {
    "prefix": "跟进已逾期",
    "suffix": "天"
  }
}

2. 修改HTML模板，应用翻译管道 #

把原有的静态文本替换成translate管道调用，同时保留动态天数的span结构：

<span *ngIf="Days < 0 && !shortSentence">
  {{ 'follow_up.prefix' | translate }}
  <span [class.font-bold]="highlightContent">{{ InDays | positiveNumber }}</span>
  {{ 'follow_up.suffix' | translate }}
</span>

补充：如果不需要给天数加样式的参数化翻译 #

如果后续不需要动态加粗样式，也可以用单键+参数传递的方式更简洁：

• 资源文件定义：

{
  "follow_up.past_due": "Follow-up is {{ daysCount }} days past due"
}

• 模板调用：

<span *ngIf="Days < 0 && !shortSentence">
  {{ 'follow_up.past_due' | translate: { daysCount: InDays | positiveNumber } }}
</span>

这种方式直接把动态天数作为参数传入翻译文本，ngx-translate会自动替换占位符{{ daysCount }}。

另外要注意：如果你的项目中启用了HTML sanitization，不要随便在翻译文本里写HTML标签（比如直接把<span class="font-bold">写进翻译内容），避免被过滤掉，所以拆分DOM结构的方式更安全可靠。

内容的提问来源于stack exchange，提问作者user2439903