Наличие нескольких языков на вашем веб-сайте позволит вам охватить больше аудитории и сделать ваше приложение более привлекательным.

Есть два способа реализовать интернационализацию в Angular: ng-translate и i18n. Оба могут сделать свое дело. Но есть разница, которую я объясню.

Нг-переводчик

Это библиотека интернационализации для Angular.

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

Одним из интересных преимуществ является то, что вы можете выполнять мгновенный перевод, не перезагружая все свое приложение.

Идея библиотеки состоит в том, чтобы поддерживать i18n до тех пор, пока Angular не сможет его полностью поддерживать. После этого он будет считаться устаревшим.

i18n

i18n - это инструмент интернационализации, позволяющий создавать многоязычные приложения.

i18n построен на Angular, поэтому вам не нужно ничего устанавливать, чтобы начать его использовать.

Ng-translate против i18n

• Ng-translate использует JIT через привязки, что означает, что перевод можно изменить в любое время. Обратной стороной является то, что привязки занимают много памяти. Angular i18n заставляет вас создавать приложение для каждого языка. Но есть способ сделать живое строительство с i18n.

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

полное развертывание.

• Angular поддерживает только использование i18n в ваших шаблонах.

• Angular поддерживает XLIFF или XMB (оба являются форматами XML), тогда как эта библиотека поддерживает JSON по умолчанию, но вы можете написать свой собственный загрузчик для поддержки любого формата, который вы хотите.

• Angular i18n поддерживает выражения ICU (формы множественного числа слов и альтернативный текст), но не библиотеку ngx-translate

• Поскольку ng-translate выполняется во время выполнения, он поддерживает только обычный HTML, тогда как Angular i18n поддерживает заполнители HTML, включая код angular. Поскольку в Angular нет компиляции $ compile в отличие от AngularJS, лучше использовать i18n.

• API библиотеки ngx-translate более полный, потому что он выполняется во время выполнения, он может предлагать больше вещей (наблюдаемые, события и т. Д.), Которых нет в Angular i18n (но на самом деле это не нужно, учитывая, что вы не можете изменить переводы)

  • Angular i18n также лучше всего подходит для SEO.

В этом уроке я покажу, как добавить i18n в ваше приложение Angular.

Установка

Angular i18n не устанавливается, поскольку он встроен.

Чтобы начать перевод текста, вам нужно пометить теги с помощью i18n.

<h1 i18n>An article<h1>

Атрибут i18n поможет инструментам Angular найти и извлечь статический текст для перевода при компиляции.

Мы также можем добавить описание и значение атрибута angular i18n, чтобы повысить точность перевода.

<h1 i18n="[meaning]|[description]@@[id]">An exemple<h1>
Example : <h1 i18n="set an article|tile of an article on the website@@articleTitle">An article<h1>

После того, как весь текст для перевода отмечен, вы можете сгенерировать файл перевода.

Angular CLI позволяет сгенерировать файл перевода i18n с помощью команды: ng xi18n.

Вы можете указать папку, которую хотите использовать для создания файла, с помощью параметра - output-path.

ng xi18n --output-path assets/i18n

Команда сгенерирует базовый файл перевода message.xlf в папке в assets / i18n.

В зависимости от того, на какой язык вы хотите перевести, ваш сайт переименует файл: message.lang.xlf.

Каждый тег ‹trans-unit› представляет собой выделенный текст.

Все тексты для перевода находятся в теге ‹source› text ‹/source›

<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
<file source-language="en" datatype="plaintext" original="ng2.template">
<body>
<trans-unit id="4237d2e6410a632fbdef1f8e6e5fcd24bf012810" datatype="html">
<source>Jeu</source>
<target>Game</target>
<context-group purpose="location">
<context context-type="sourcefile">app/navbar/navbar.component.html</context>
<context context-type="linenumber">12</context>
</context-group>
</trans-unit>
<trans-unit

Строить

Если вы хотите создать приложение на целевом языке, вы должны отредактировать файл angular.json.

В разделе «Конфигурации сборки архитектора» добавьте новую конфигурацию на целевой язык.

Определите блок конфигурации fa для каждого языка, который вы хотите перевести.

Чтобы выполнить сборку на указанном языке и создать папку dist, выполните команду:

ng build — configuration=lang

Обслуживание приложения

Чтобы иметь возможность использовать другой язык с помощью i18n, у вас должны быть разные пакеты распространения, то есть по одному для каждого языка. Для обслуживания приложения могут использоваться разные стратегии:

• Определение языка на стороне сервера (с использованием локали)

• Параметры URL,

«Метод параметров url позволяет переключать язык на стороне клиента. »

В этом уроке мы сосредоточимся на методе параметров URL.

Сначала вам нужно добавить ярлык для каждого языка в конфигурациях angular.json под тегом serve.

Для обслуживания на указанном языке введите команду:

ng serve — configuration=lang

Ваше приложение откроется на http : // localhost: 4200 / lang.

Таким образом, это в значительной степени способ настроить ваше приложение angular для использования i18n.

Не стесняйтесь комментировать и хлопать в ладоши, если вы найдете эту статью интересной.

Подпишитесь на Мохамеда Фофана , чтобы получать уведомления о моей следующей публикации.