Angular переключение языков на стороне клиента - PullRequest
Новая
       21

Angular переключение языков на стороне клиента

3 голосов
/ 01 февраля 2020

Фон

Мы разрабатываем приложение с Angular 8.2. Этот вопрос не относится к AngularJs.

Проблема

Я прочитал документ Angular здесь: https://angular.io/guide/i18n

Но похоже, что локализация была сделана в процессе строительства. После того, как приложение собрано, его нельзя изменить. Итак, как мы можем создать приложение Angular, которое поддерживает переключение языков без целых чисел rnet?

CDN

Наше приложение развернуто за CDN. Серверы CDN обратного прокси-сервера файлов HTML, JavaScript и CSS и будут кэшировать все переданные файлы. Переключение языка приложений на сервере недоступно.

Электронное издание

И мы предоставили клиентское приложение на основе электронов. Нам нужно доставить приложение один раз, и пользователь может переключаться между различными языками без inte rnet. Но я не нашел решения этой проблемы.

Доменное имя

Вы можете упомянуть, что мы можем переключать язык посредством переключения домена. Но по причине CORS, наше доменное имя приложения на стороне клиента ограничено и не может быть переключено. Таким образом, доступно только одно доменное имя.

Google Play Store

И мы создали и опубликовали наше приложение в Google Play Store через TWA. Домен был зарегистрирован с помощью приложения. Смена доменов также приводит к повторной загрузке приложения из Магазина.

Информация о дополнении

И исходный код приложения находится здесь: https://github.com/AiursoftWeb/Kahla.App

Просто для возможной дополнительной информации. Не нужно проверять его, чтобы ответить на этот вопрос.

Ответы [ 2 ]

2 голосов
/ 06 февраля 2020

В прошлом мы сталкивались с аналогичными требованиями, и поэтому я создал пост в блоге о переводах в Angular в виде кода (без библиотек, только ваш код и архитектура проекта).

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

Чтобы ответить на все вопросы:

CDN :

  • языковая мутация находится на уровне маршрута (не домен) )
    • domain.com/language/page
  • domain.com может включать в себя некоторую логику перенаправления
    • , например, перенаправить на язык по умолчанию или определить его (у нас есть Облачная функция, которая делает это, основываясь на языковых предпочтениях браузера

Электрон :

  • Переводы присутствуют на время сборки
  • Модули, содержащие различные данные i18n, поставляются вместе с приложением и загружаются при необходимости (но доступны для электрона мгновенно, когда они объединены вместе)

Домен :

  • снова, язык переключается с использованием «маршрута», а не домен
    • пример: domain.com/en/contact для Engli sh domain.com/cs/contact для чешского
  • это здорово не только из-за cors, но также из-за SEO и Crawlers
    • самая важная часть маршрута на первом месте (язык)

Google Play Store :

  • как и в случае с электроном, он связан вместе
  • использует маршрутизацию, а не домен

Даже если вы решите не использовать коммутацию на основе маршрута, вы можете сохранить переводы в вашем сервисе управления состоянием или обёртывания и доступ к ним, как если бы вы делали это с любыми другими «asyn c» данными в шаблоне через async pipe

Third Party : Некоторые другие решения с участием сторонних библиотек: ngx-translate (устарело) и Transloco

0 голосов
/ 06 февраля 2020

Вы можете доставить файл с переводами вместе с вашей заявкой. Например, переводы. json вот так: 

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

Поскольку этот файл является частью вашего проекта, пользователю не нужен inte rnet доступ для переключения языка.

...