如何在ngx-translate中注入参数并保留HTML标签？

这个问题我之前也碰到过，其实只要调整翻译文件和模板的写法就能完美解决，分这几步来：

1. 更新翻译文件，嵌入HTML样式和参数占位符 #

首先要把需要加粗的HTML标签直接写到翻译键的内容里，同时保留参数占位符。注意JSON里的双引号需要转义，所以class="bold"要写成class=\"bold\"。

修改你的en-US.json：

{
  "redeem": {
    "statement": "You currently have <span class=\"bold\">{{points_param}}</span> points worth <span class=\"bold\">{{credit_param}}</span> statement credit."
  }
}

2. 在模板中传入动态变量（支持管道处理） #

接下来在组件模板里，直接把组件中的动态变量（包括经过管道处理的值）传给translate管道，同时用[innerHTML]来渲染生成的HTML内容，这样样式才会生效。

模板代码：

<p [innerHTML]="'redeem.statement' | translate:{
  points_param: rewards?.points,
  credit_param: (rewards?.amount | currency)
}"></p>

这里的rewards?.points和(rewards?.amount | currency)都是组件里的动态值，完全替代了原来的静态参数，而且currency管道也能正常工作。

3. 确保加粗样式生效 #

最后别忘了在全局样式或者组件样式里定义.bold类的样式，不然加粗效果不会显示：

.bold {
  font-weight: 700; /* 或者直接写bold */
}

原理说明 #

ngx-translate会先把参数占位符替换成你传入的动态值，生成完整的HTML字符串，然后[innerHTML]会把这个字符串解析成真实的DOM元素，这样既保留了加粗样式，又完美使用了组件的动态变量。

如果你的参数包含用户输入的内容，要注意XSS风险，这时候可以用Angular的DomSanitizer来处理安全的HTML，但如果是系统生成的数字、货币这类可控内容，就不需要额外处理啦。

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