如何在Angular的HTML模板i18n国际化字符串中使用变量

完全可以，你给出的预期示例写法本身就是合法的，Angular原生支持这种用法。

核心规则说明 #

Angular的模板i18n机制会自动识别{{}}插值表达式作为动态变量占位符，和你在TypeScript里用$localize写的模板字符串效果完全一致：

• 执行ng extract-i18n提取翻译源文件时，工具会自动把插值位置标记为动态变量位，不需要额外手动声明
• 你加在插值后面的:user_name:标识会被识别为变量的含义说明，方便翻译人员理解该变量的作用，不会被当作普通文本翻译
• 翻译条目中变量的位置可以根据目标语言的语序灵活调整，渲染时Angular会自动把对应变量值插入正确位置

示例效果验证 #

你写的这段代码：

<p i18n="@@test.welcome">Hello {{name}}:user_name:! How's your day?</p>

和你在TS中写的$localize代码生成的翻译条目完全一致，渲染输出的结果也没有任何区别。如果不需要给翻译人员额外提示变量含义，直接删掉:user_name:也可以正常运行。

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