Angular中如何为对象类型自定义属性添加i18n属性

Angular 原生i18n的文本提取逻辑，默认仅识别DOM节点上标记的i18n属性、模板静态文本，对方括号绑定语法里的对象字面量内嵌文本，无法直接通过DOM节点打i18n标记的方式做适配，可根据项目版本、技术栈选择以下可行实现：

• 优先使用$localizeTagged Template语法（Angular 9+ 原生支持）
  这是目前最贴合原代码写法的实现方式，CLI的ng extract-i18n命令可以直接识别绑定表达式内用$localize包裹的文本，自动提取到翻译语言文件中，不需要添加额外的隐藏节点。示例改造代码：

  <mycomp 
    label="Date of Birth" 
    [errorMessage]="{
      maximumDate: $localize`:@@dobMaxDateError:Date of birth can not be future date.`
    }"
  ></mycomp>
  

  语法中的@@dobMaxDateError是手动指定的翻译条目ID，方便后续在语言文件中对应维护翻译内容。
• 低版本Angular（无$localize支持）用模板引用变量透传翻译值
  把需要翻译的静态文本放在带hidden属性的span节点上（不会在页面上显示），给节点打标准的i18n标记，再通过本地模板引用变量读取翻译后的文本内容，拼接到errorMessage对象中。示例代码：

  <!-- 隐藏的翻译占位节点，无实际页面展示效果 -->
  <span
    #maxDateErrRef
    hidden
    i18n="@@dobMaxDateError"
  >Date of birth can not be future date.</span>
  
  <mycomp 
    label="Date of Birth" 
    [errorMessage]="{maximumDate: maxDateErrRef.textContent.trim()}"
  ></mycomp>
  

  注意读取textContent时需要做trim处理，避免模板换行、缩进带来的多余空白字符。
• 高复用性场景：在组件类中通过i18n服务组装入参
  如果同一个错误提示需要在多个表单项中复用，可以跳过模板硬编码的方式，通过项目集成的i18n服务（无论是官方运行时i18n还是ngx-translate等第三方方案）直接获取对应语言的文本，在组件类中组装好errorMessage对象后再绑定给组件。这种方式可以自动响应语言切换的变化，不需要手动更新模板引用的值，适合需要实时切换语言的应用。
• 存量项目批量改造：自定义i18n提取规则
  如果项目已经积累了大量类似的对象绑定内嵌静态文本的写法，不需要逐行修改模板，可以调整i18n提取工具的扫描正则，让工具自动识别绑定表达式中的字符串字面量，批量收集待翻译内容，大幅降低存量国际化改造的工作量。

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