如何在Aurelia i18n的TValueConverter中带参数使用HTML属性？

没问题，这个需求完全可行！Aurelia的TValueConverter其实支持和t指令一样的[html]前缀写法，只需要简单调整语法就能实现带参数的HTML翻译。

方法一：给翻译Key添加[html]前缀 #

直接在你要翻译的key字符串前面加上[html]前缀，然后正常传递参数即可。示例如下：

<!-- 模板中的写法 -->
${'[html]title' | t: { some: '自定义参数' }}

对应的i18n资源文件（比如en.json）里，title的值可以包含HTML标签和参数占位符：

{
  "title": "欢迎来到<span class='highlight'>{{some}}</span>的页面"
}

这样渲染后，<span>标签会被解析为真实的HTML元素，参数也会正确替换进去。

方法二：结合innerhtml.bind使用 #

如果你觉得加前缀的方式不够直观，也可以用innerhtml.bind属性绑定来配合TValueConverter，这种方式不需要给key加前缀：

<!-- 模板中的写法 -->
<div innerhtml.bind="'title' | t: { some: '自定义参数' }"></div>

这种方式下，innerhtml.bind会自动把TValueConverter返回的带HTML的内容渲染成真实DOM元素，效果和第一种方法一致。

重要注意事项 #

无论用哪种方式，都要确保翻译内容是可信的！如果翻译文本中包含用户输入的未过滤内容，很容易引发XSS攻击。一定要对不可信内容做转义或过滤处理后再用于翻译。

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