Angular 项目的 l10n 和 i18n 的最佳实践是什么？

Question

我正在开发一个有 2 种语言的项目：英语和法语。我需要本地化两种语言的内容。例如，英语和法语的页眉和页脚中的不同内容。页面上的多语言内容（页面标题、页面正文等）也将通过管理面板进行管理。

我需要向 URL 添加语言环境。各种语言的 URL 结构是相同的。例如：

• site.com/en/about
• site.com/fr/about
• site.com/en/contact
• site.com/fr/contact

Angular 官方文档建议将单独的 Angular 项目构建和部署到单独的语言文件夹中（在我的例子中：“en”和“fr”）。这将阻止缓存网站资产，用户在切换到另一种语言时必须加载所有内容。

而且我还需要根据语言环境在本地运行/启动一个单独的项目。例如：

ng serve --configuration=en
ng serve --configuration=fr --port 4201

此外，每次更新语言字符串时，我都需要运行 CLI 命令：

ng extract-i18n --output-path src/locale

设置对我来说似乎有点复杂。当我要添加另一种语言时，它会更加复杂。

有没有更好/更简单的方法来管理具有本地化 (l10n) 和国际化 (i18n) 的多语言 Angular 项目？

我需要通过单击来添加一个按钮，例如，URL 将从“/en/about/”更改为“/fr/about/”，反之亦然。

Answer 1

Transloco是角我用更多的和详细记录功能丰富的国际化/ i10n解决方案之一。

我不确定为什么他们从自述文件中删除了功能比较，但在这里他们概述了它如何与其他解决方案叠加。从您提到的内容中脱颖而出的一些事情：

• 语言翻译在运行时从静态 JSON 资产延迟加载。因此，应用程序加载一次并可以即时切换语言。

  • 只有一个 Angular 项目，所以缓存工作得很好。
  • 切换语言时用户无需重新加载。
  • 新语言就像添加一个新的 JSON 文件一样简单。

• I18n和 l10n支持。

我不知道有一个内置的解决方案可以让路线包含当前语言。不过，这当然是可行的。这是一个 Stackblitz 示例。

（小故事：我们的团队曾经使用ngx-translate，但由于有关ngx-translate 未来的问题而迁移到Transloco。