Angular 客户端语言切换

Question

背景

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

问题

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

但似乎本地化是在构建过程中完成的。应用程序构建后，无法更改。那么我们如何构建一个支持语言切换的 Angular 应用呢？

CDN

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

电子版

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

域名

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

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 可能包含一些重定向逻辑
  • 例如，重定向到默认语言或确定它（我们有一个云功能，可以根据浏览器请求语言首选项执行此操作

电子：

• 编译时存在翻译
• 包含不同 i18n 数据的模块随应用一起提供，并在需要时延迟加载（但捆绑在一起的电子可立即使用）

域：

• 再次，语言是使用“路由”而不是域切换的
  • 例如：domain.com/en/contact 用于英语 domain.com/cs/contact 用于捷克
• 这不仅是因为 cors，还因为 SEO 和 Crawlers
  • 路线中最相关的部分排在第一位（语言）

Google Play 商店：

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

---

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

---

第三者： 其他一些涉及 3rd 方库的解决方案是 ngx-translate（已弃用）和 Transloco

Answer 2

这在 Angular 9 及更高版本中发生了变化。您现在可以只编译一次应用程序，然后在运行时加载特定语言的翻译。不幸的是，Angular 不包含在运行时获取资源文件的 API，但您必须使用第 3 方插件。其中之一是Soluling's npm package。使用它后，您可以将应用程序部署到单个 URL 中，它可以提供任意数量的语言。

我写了一个 sample 来说明这一点。

Answer 3

您可以通过您的应用程序提供包含翻译的文件。 例如。像这样的 translations.json：

{
  text: 'this is english',
  textid: 123,
  language 'GB'
},
{
  text: 'это по-английски' ,
  textid: 123,
  language 'RUS'
},
{...}

由于该文件是您项目的一部分，因此用户无需访问互联网即可切换语言。