ng-alain 项目中 STColumnButtonPop 组件的国际化支持优化

背景介绍

在 ng-alain 项目中，STColumnButtonPop 是一个常用的表格列按钮弹出组件，它提供了便捷的交互方式。然而，在实际开发过程中，开发者发现该组件的文本属性（如标题、取消按钮文本和确认按钮文本）缺乏国际化支持，这给多语言应用的开发带来了不便。

问题分析

STColumnButtonPop 组件原本提供了三个文本属性：

• title：弹出框标题
• cancelText：取消按钮文本
• okText：确认按钮文本

这些属性仅支持直接传入字符串值，无法使用 ng-alain 内置的国际化机制。在需要支持多语言的应用程序中，开发者不得不自行处理文本的翻译逻辑，增加了开发复杂度。

解决方案

为了保持与 ng-alain 其他组件 API 的一致性，项目维护者决定为 STColumnButtonPop 组件新增三个国际化属性：

• titleI18n：国际化标题
• cancelI18n：国际化取消按钮文本
• okI18n：国际化确认按钮文本

这种设计模式在 ng-alain 的其他组件中已有广泛应用，开发者可以轻松地迁移现有代码，同时保持项目整体的风格统一。

实现细节

新增的国际化属性采用了 ng-alain 的标准国际化方案。开发者可以通过以下方式使用：

1. 在语言资源文件中定义翻译键值对：

{
  "button": {
    "confirm": "确认",
    "cancel": "取消",
    "deleteTitle": "删除确认"
  }
}

2. 在组件中使用国际化属性：

{
  buttons: [
    {
      text: '删除',
      pop: {
        titleI18n: 'button.deleteTitle',
        okI18n: 'button.confirm',
        cancelI18n: 'button.cancel',
        // 其他配置...
      }
    }
  ]
}

升级建议

对于现有项目，建议开发者逐步将原有的文本属性迁移到新的国际化属性。为了保持向后兼容，原有的文本属性仍然可用，但新开发的功能建议优先使用国际化属性。

总结

ng-alain 项目对 STColumnButtonPop 组件国际化支持的增强，体现了框架对开发者体验的持续优化。这一改进使得表格操作按钮的国际化变得更加简单和一致，有助于提升多语言应用的开发效率。

对于正在使用 ng-alain 的开发者来说，了解并应用这一特性可以更好地构建国际化应用，同时保持代码的整洁和可维护性。