Angular 客户端语言切换

Question

背景

我们正在使用 Angular 8.2 开发应用程序。这个问题与 AngularJs 无关。

问题

我在这里阅读了 Angular 本地化文档:https://angular.io/guide/i18n

不过好像是在构建过程中进行了本地化。应用程序构建后，无法更改。那么，我们如何构建一个支持在没有互联网的情况下进行语言切换的 Angular 应用程序呢？

内容分发网络

我们的应用部署在 CDN 后面。 CDN 服务器反向代理 HTML、JavaScript 和 CSS 文件，并将缓存所有传递的文件。服务器端应用程序语言切换不可用。

Electron 版

并且我们提供了一个基于electron的客户端应用。我们需要一次交付应用程序，用户可以在没有互联网的情况下在不同语言之间切换。但我没有找到解决办法。

域名

您可能会提到我们可以通过切换域来切换语言。但是因为CORS的原因，我们客户端的app域名是有限制的，不能切换。所以只有一个域名可用。

Google Play 商店

我们已经通过 TWA 构建了我们的应用并将其发布到 Google Play 商店。该域已在该应用程序中注册。切换域也会导致再次从应用商店下载应用。

附加信息

应用程序的源代码在这里:https://github.com/AiursoftWeb/Kahla.App

只是为了可能的附加信息。不必检查它来回答这个问题。

Answer 1

我们过去遇到过类似的要求，这就是为什么我创建了一篇关于将 Angular 中的翻译作为代码(没有库，只有您的代码和项目架构)的博文。

https://medium.com/angular-in-depth/angular-typed-translations-29353f0a60bc

要回答所有的挑战:

CDN:

• 语言变化在路由级别(不是域)
  • domain.com/language/page
• domain.com 可能包含一些重定向逻辑
  • 例如，重定向到默认语言或确定它(我们有一个云功能可以根据浏览器请求的语言首选项执行此操作

Electron :

• 在构建时提供翻译
• 包含不同 i18n 数据的模块随应用程序一起提供，并在需要时延迟加载(但 Electron 可以立即使用，因为它们捆绑在一起)

域:

• 同样，使用“路由”而不是域来切换语言
  • 示例:domain.com/en/contact 用于英语 domain.com/cs/contact 用于捷克语
• 它很棒，不仅因为 cors，还因为 SEO 和 Crawlers
  • route 最相关的部分优先(语言)

Google Play 商店:

• 和electron一样，捆绑在一起
• 使用路由而不是域

---

即使您决定不使用基于“路由”的切换，您也可以将翻译存储在状态管理或 package 服务中，并像通过 访问模板中的任何其他“异步”数据一样访问它们异步管道

---

第 3 方: 涉及第 3 方库的其他一些解决方案是 ngx-translate(已弃用)和 Transloco