Angular 5 интернационализация

Я создаю приложение с использованием новейшей версии Angular5, и мне нужно, чтобы пользователь мог переключать языки. Мне никогда не приходилось реализовывать это в Angular2+ (на самом деле я использую Angular5).

Мне нужно установить переводы в двух местах:

  • Html шаблона компонента - изменить метки на указанный язык
  • В коде в файле component.ts - мне может понадобиться перевести некоторые строки, которые создаются динамически при определенных условиях в коде

Я смотрел на http://www.ngx-translate.com/, и он, похоже, делает все, что мне нужно, так как он позволяет вам менять язык без перестройки кода, см. Здесь. Однако я читал, что это, вероятно, будет устаревшим из-за того, что основной разработчик перешел в команду разработчиков углов для разработки своего кода i18n.

Я также понимаю, что текущий i18n не поддерживает все, что мне сейчас нужно, смотрите здесь.

Мой вопрос - в каком состоянии находятся переводы в последней версии Angular? Есть ли другие библиотеки, которые люди порекомендовали бы вместо этого, если действительно, сам Angular еще не получил полной поддержки (для изменения языка без перекомпиляции)? Хорошо ли ngx-translate для будущего?

Любое руководство в этой области с благодарностью!

Источник

2 ответа

Решение

Потратив время на изучение этого вопроса, я решил опубликовать основные различия, которые я обнаружил между http://www.ngx-translate.com/ и Angular-i18n:

  • Angular работает только с одним языком за раз, вам нужно полностью перезагрузить приложение, чтобы изменить язык. Поддержка JIT означает только то, что он работает с JIT, но вам все равно придется предоставлять переводы при начальной загрузке, потому что он заменит текст в ваших шаблонах во время компиляции, тогда как эта библиотека использует привязки, что означает, что вы можете изменить переводы в любое время., Недостатком является то, что привязки забирают память, поэтому угловой путь более производительный. Но если вы используете OnPush для своих компонентов, вы, вероятно, никогда не заметите разницу
  • На данный момент Angular поддерживает только использование i18n в ваших шаблонах, я работаю над функцией, которая позволит вам использовать его в вашем коде, но он все еще находится в стадии разработки. Эта библиотека работает как в коде, так и в шаблонах.
  • Angular поддерживает либо XLIFF, либо XMB (оба являются форматами XML), тогда как эта библиотека поддерживает JSON по умолчанию, но вы можете написать свой собственный загрузчик для поддержки любого формата, который вам нужен (например, есть загрузчик для PO-файлов). Лично Json-файлы довольно просто читать, а не эти другие форматы, но это не является огромным недостатком.
  • Angular поддерживает выражения ICU (множественное число и выбор), но эта библиотека не
  • Angular поддерживает html-заполнители, включая код angular, тогда как эта библиотека поддерживает только обычный html (потому что он выполняется во время выполнения, а не во время компиляции, и в Angular нет $ compile, как это было в AngularJS)
  • API этой библиотеки более полный, потому что он выполняется во время выполнения, он может предложить больше вещей (наблюдаемых, событий, ...), которых нет у Angular (но на самом деле это не нужно, учитывая, что вы не можете изменять переводы). Создатель ngx-translate сказал следующее:

Ocombe (разработчик ngx): @josersleal, это именно то, что они и сделали, команда разработчиков Angular наняла меня, чтобы улучшить i18n для всех. Но нет возможности интегрировать мою библиотеку напрямую в ядро, после трех месяцев работы в основной команде, которую я могу скажу вам, что Angular i18n намного сложнее и сложнее, чем моя библиотека. Он обрабатывает много более сложных вещей, и делает это без всех ошибок и недостатков, которые есть в моей библиотеке. Я понимаю, что расстраивает то, что ядро ​​не развивается так быстро, как то, что может делать библиотека, но есть причины для этого, и первое - это то, что вы не можете реализовать что-то и изменить его всякий раз, когда видите, что забыли включить вариант использования. Все должно быть тщательно спланировано и продумано. Тем не менее, у вас будет большая часть того, что эта библиотека может сделать в ядре в будущем, но, к сожалению, может пройти год, прежде чем мы туда доберемся. Хорошей новостью является то, что это будет намного лучше, чем моя наивная реализация.

Это хорошая статья для обсуждения основных различий между ngx-translate и Angular i18n: https://github.com/ngx-translate/core/issues/495

Изменения для i18n должны появиться в версии 6 angular. Сегодня мы находимся на версии 5:

Некоторые мысли...

  • Angular-i18n становится более производительным, когда вы компилируете свое приложение на нужном вам языке (а не переводы, выполняемые во время выполнения). Также это может быть недостатком, поскольку вам может потребоваться несколько сборок приложения на разных языках.
  • Если бы мы использовали SEO, angular-i18n был бы выходом из-за просмотра URL. Для моего случая мне это вообще не нужно.
  • Если нам требовалось переключение множественного числа и т. Д. Опять же, мне это не нужно - мне просто нужен довольно простой переключатель языка времени выполнения в шаблонах и коде.
  • Angular-i18n не будет выпущен, по крайней мере, до марта 2018 года. Что касается меня, я не могу ждать до тех пор, пока мне нужно создать свое приложение сейчас.
  • У ngx-translate не будет столь же полного набора возможностей, как у angular-i18n, НО, опять же, мне нужны только простые переводы во время выполнения, так что думаю, что это хорошо для того, что нам нужно.
  • ngx-translate имеет открытый исходный код и придет в тот день, когда он больше не разрабатывается, если есть серьезная проблема, которую, я думаю, я смогу решить сам (надеюсь, к тому времени, когда это произойдет, любые проблемы, которые могут возникнуть, будут устранены).

Я также собираюсь взглянуть на библиотеку Angular-l10n, так как она выглядит очень хорошо:

Источник

Да. ngx-translate хорош до сих пор, и я надеюсь, что так будет и в будущем.

Я использую http://www.ngx-translate.com/ в своем текущем проекте Angular 5 с 5+ языками.

Пока у меня все нормально. Мне не нужно было вносить какие-либо изменения, это работало как подключи и играй.

Я использовал этот плагин https://github.com/ngx-translate/core

Источник

Вместо использования ng-translate вы можете использовать файл конфигурации и языковые файлы json, для этого вы можете разместить этот файл json в расположении вашего сервера и легко получить к нему доступ из angular

в config.json ты можешь осквернять тип языка

{ 
  "LANGUAGE": "fr.json" 

}

в en/fr.json файл

{
    "TITLE": "Bonjour Angular avec translate !",
    "SELECT": "Changer la langue"

}

услышать пример кода

App.component

export class AppComponent  {

  name =  LAN_CONFIG['TITLE'];
  // name =  APP_CONFIG['LANGUAGE'];
}

ИЛИ

Вы можете использовать файл config.js

добавьте этот сегмент кода в раздел заголовка index.html

<script>
    var xhrObj = new XMLHttpRequest();
    var url = '/assets/config/config.js';
    xhrObj.open('GET', url, false);
    xhrObj.send('');
    var se = document.createElement('script');
    se.type = "text/javascript";
    se.text = xhrObj.responseText;
    document.getElementsByTagName('head')[0].appendChild(se);
  </script>

config.js файл

window.config= {};
window.config['LANGUAGE'] = 'er.js';

вы можете получить доступ к этой переменной для доступа к значению, используя

@Injectable()
export class LanguageService {

  appConfig:AppConfigService;
  lanTypePath ='../../assets/i18n/'+ window['config'].LANGUAGE;
 constructor(private http: HttpClient)
  {
    console.log(APP_CONFIG['LANGUAGE']);
  }

  public load()
  {
    return new Promise((resolve, reject) => {

      this.http.get(this.lanTypePath).catch((error: any): any => {

        reject(true);
        return Observable.throw('Server error');
      }).subscribe((envResponse :any) => {
        let t = new LanConfig();
        //Modify envResponse here if needed (e.g. to ajust parameters for https,...)
        LAN_CONFIG = Object.assign(t, envResponse);
        resolve(true);
      });

    });
  }

}

подумайте, что этот метод лучше, чем предыдущий для вашей ситуации

Демо Github

Надеюсь, это поможет..!

Источник

Роб МакКейб, есть и другие важные проблемы, помимо той, что вы перечислили выше. Я объяснил это здесь.

Источник
Другие вопросы по тегам