[英]Angular client-side language switching
We are developing an app with Angular 8.2.我们正在使用 Angular 8.2 开发一个应用程序。 This question is not related to AngularJs.这个问题与 AngularJs 无关。
I have read the Angular localization document here: https://angular.io/guide/i18n我在这里阅读了 Angular 本地化文档: https : //angular.io/guide/i18n
But it seems that localization was done in the building process.但似乎本地化是在构建过程中完成的。 After the app is built, it can't be changed.应用程序构建后,无法更改。 So how can we build an Angular app which supports language switching without the internet?那么我们如何构建一个支持语言切换的 Angular 应用程序,而无需互联网呢?
Our app is deployed behind CDN.我们的应用程序部署在 CDN 后面。 The CDN servers reverse-proxy the HTML, JavaScript and CSS files and will cache all files passed. CDN 服务器反向代理 HTML、JavaScript 和 CSS 文件,并将缓存所有传递的文件。 The server-side app language switching is not available.服务器端应用语言切换不可用。
And we have provided a client-side app based on the electron.我们提供了一个基于电子的客户端应用程序。 We need to deliver the app once and the user can switch between different languages without the internet.我们需要一次交付应用程序,用户可以在没有互联网的情况下在不同的语言之间切换。 But I have found no solution to it.但我没有找到解决办法。
You may mention that we can switch language via the switching the domain.您可能会提到我们可以通过切换域来切换语言。 But for CORS reason, our client-side app domain name is limited and can not be switched.但是由于CORS原因,我们的客户端应用域名是有限的,不能切换。 So only one domain name is available.所以只有一个域名可用。
And we have built and published our app to the Google Play Store via TWA.我们已经通过 TWA 构建并发布了我们的应用程序到 Google Play 商店。 The domain was registered with the app.该域已在应用程序中注册。 Switching domains also cause downloading the app from Store again.切换域还会导致再次从商店下载应用程序。
And the source code of the app is here: https://github.com/AiursoftWeb/Kahla.App该应用程序的源代码在这里: https : //github.com/AiursoftWeb/Kahla.App
Just for possible additional info.只是为了可能的额外信息。 Don't have to check it for answering this question.不必检查它来回答这个问题。
We've faced similar requirements in past and that's why I created a blog post about translations in Angular as a code (without libs just your code and project architecture).我们过去也遇到过类似的需求,这就是为什么我创建了一篇关于将 Angular 翻译为代码的博客文章(没有库,只有你的代码和项目架构)。
https://medium.com/angular-in-depth/angular-typed-translations-29353f0a60bc https://medium.com/angular-in-depth/angular-typed-translations-29353f0a60bc
To answer all of the challenges:要回答所有挑战:
CDN :中文网:
domain.com/language/page
domain.com
may include some redirect logic domain.com
可能包含一些重定向逻辑
Electron :电子:
Domain :域:
domain.com/en/contact
for English domain.com/cs/contact
for Czech示例: domain.com/en/contact
(英语) domain.com/cs/contact
(捷克语)Google Play Store :谷歌商店:
Even if you decide not going with the "route" based switching, you may store the translations in your state management or wrapping service and access them as you would do with any other "async" data in the template via async
pipe即使您决定不使用基于“路由”的切换,您也可以将翻译存储在状态管理或包装服务中,并像通过async
管道处理模板中的任何其他“异步”数据一样访问它们
3rd Party : Some other solutions involving 3rd party libs are ngx-translate (deprecated) and Transloco第 3 方:涉及第 3 方库的其他一些解决方案是 ngx-translate(已弃用)和 Transloco
This has changed in Angular 9 and later.这在 Angular 9 及更高版本中发生了变化。 You can now compile application only once and then load translations in a specific language on runtime.您现在只能编译一次应用程序,然后在运行时加载特定语言的翻译。 Unfortunately Angular does not contain API to get the resource files on runtime but you have to use a 3rd party add-on.不幸的是,Angular 不包含用于在运行时获取资源文件的 API,但您必须使用 3rd 方附加组件。 One such is Soluling's npm package .其中之一是Soluling 的 npm 包。 Once you use it you can deploy the pplication into single URL and it can serve any number of languages.使用它后,您可以将应用程序部署到单个 URL 中,并且它可以提供多种语言。
You could deliver a file containing the translations with your application.您可以随应用程序一起提供包含翻译的文件。 Eg a translations.json like that:例如这样的 translations.json:
{ text: 'this is english', textid: 123, language 'GB' }, { text: 'это по-английски' , textid: 123, language 'RUS' }, {...}
As that file is part of your project, the user doesn´t need internet access to switch language.由于该文件是您项目的一部分,因此用户无需访问互联网即可切换语言。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.