2026西湖龙井茶官网DTC发售：茶农直供，政府溯源防伪到农户家
你好，开发者社区！👋
在我们现代化运输管理系统（YMS）的旅程中，我们已经探讨了性能、文件夹结构和代码规范。但是，当我们谈论企业级系统时，有一个非功能性需求常常让前端团队感到头疼：国际化（i18n）。
许多教程只教如何将“保存”按钮从一种语言翻译成另一种语言。但在真实且大规模物流系统的前线，情况要复杂得多。这不仅仅是翻译单词的问题，而是要定义在应用程序架构中如何处理这些翻译。
1. 数字挑战（远超文本范畴）
在讨论翻译库之前，我们需要记住，国际化会影响界面上的数学表达。在巴西，卡车的重量显示为 45.500,00 kg。而在美国，它必须被渲染为 45,500.00 kg。在物流系统中，如果逗号位置错误，可能会导致高速公路上的巨额罚款。
幸运的是，利用原生的管道（DecimalPipe 和 DatePipe）并结合在应用初始化时注入正确的 LOCALE_ID，Angular 可以自动解决这个问题：
<span>读取重量: {{ pesoTotalCapturado | number:'1.2-2' }}</span>
<span>日期: {{ momentoPesagem | date:'short' }}</span>
2. 架构困境：运行时 vs. 构建时
当我们重构系统文本和标签的翻译时，遇到了一个重大疑问：是采用原生的 @angular/localize，还是使用第三方库？
为了理解我们的决定，我们需要将这两种方法分为两类：
A. 构建时翻译 (AOT) - @angular/localize
Angular 的原生解决方案对于页面性能来说非常棒，因为它将文本直接嵌入到 HTML 中。但它是通过在 ng build 期间为每种语言生成整个系统的独立版本来实现这一点的。
- 在 YMS 中的问题： 如果我们有 3 种语言（葡萄牙语、英语、西班牙语），我们在持续集成/持续部署（CI/CD）中的构建时间会增加两倍。对于一个庞大的系统来说，生成并托管多个构建文件夹（每种语言一个）开始阻碍我们的部署流程。此外，切换语言需要完全重新加载页面。
B. 运行时翻译 (Runtime) - @jsverse/transloco
这正是 Transloco 库为我们大放异彩的地方。它在用户浏览时动态加载包含翻译内容的 JavaScript 对象表示法（JSON）文件。
- 维护方面的胜利： 使用 Transloco，我们只需进行一次构建。该库在架构上的巧妙之处在于其作用域（懒加载作用域）。如果用户访问称重模块，Transloco 不会下载整个系统的字典；它只下载该页面专用的一个大小为 2KB 的微小型 JSON 文件。这对网络性能的影响微乎其微，语言切换是实时的，我们的 CI/CD 流程也因此受益。
3. 实践：使用 Transloco 编写代码
Transloco 为我们提供了令人惊叹的开发者体验（DX），允许使用管道或结构型指令，同时保持 HTML 代码的简洁和优化。
在 HTML 中：
我们没有为每个单词使用单独的管道（这会迫使 Angular 在底层创建多个订阅），而是使用了结构型指令
免责声明：本文内容来自互联网，该文观点不代表本站观点。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请到页面底部单击反馈，一经查实，本站将立刻删除。
