Автор оригинала: Ankit Sharma.

Вступление

В этой статье мы узнаем, как сделать наше угловое приложение доступным на разных языках с использованием I18N и локализации. Мы создадим угловое приложение и настроив его, чтобы служить контенту на трех разных языках. Мы также разверним наше приложение в Google Firebase и посмотрите, как локализация работает в режиме реального времени.

Мы будем использовать угловой 7 и VS код для разработки нашего приложения. Посмотрите на вывод приложения.

Исходный код

Получите исходный код для этого приложения из Github Отказ

Что такое I18n?

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

Что такое локализация?

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

Создание углового 7 приложения

Первый шаг – создать угловое 7 приложений. Если вы новичок в угловании, я бы предложил вам прочитать мою статью Начало работы с угловой 7,0 Узнать, как настроить угловую среду разработки в вашей машине.

Запустите следующую команду, чтобы создать приложение.

ng new i18nDemo

Откройте приложение I18NDEMO с использованием VS-кода.

Настройка компонента приложения

Открыть app.component.html файл. Замените уже существующий текст со следующим кодом.

Localization Demo in Angular using i18n

Hello, My name is Ankit

This text will remain same in all languages

Вы можете наблюдать, что мы отмечали < H1> ; D

Теги с атрибутом i18n. Это способ сказать угловой, чтобы рассмотреть этот текст как переводчивый контент. Мы подробно рассмотрим атрибут I18N в следующем разделе.

Создание исходного файла перевода

Запустите следующую команду в CLI, чтобы создать файл источника перевода.

ng xi18n --output-path translate

Это создаст папку под названием Translate и созданию messages.xlf файл внутри него. Откройте файл, и внутри него можно соблюдать следующий XML-код.

                    Localization Demo in Angular using i18n                  app/app.component.html          1                            Hello, My name is Ankit                  app/app.component.html          5

Этот файл содержит список >> Теги. Эти теги будут иметь все содержимое, которое было отмечено для перевода, используя атрибут I18N. Вы также можете наблюдать, что каждый Ans-Unit> Tag имеет свойство ID, связанной с ним. Этот уникальный идентификатор будет сгенерирован по умолчанию для каждого тега, который был отмечен атрибутом I18N. Мы также можем настроить идентификатор, предоставив имя PR EF IXed с @@ как у нас есть сделать NE с тегом

`в предыдущем разделе. Хенс E, ID для тега - «MyName», как мы его определили.`

Нет записи для < ; P> Тег в файле перевода, потому что мы не помечали его с атрибутом i18n. Угловой инструмент перевода не будет учитывать его для переводов.

Если вы измените текст для любого тега в файле HTML, вам нужно восстановить файл перевода. Регенерация файла переопределят идентификатор по умолчанию >> Теги. Следовательно, рекомендуется предоставлять пользовательские идентификаторы для каждой трансцирусной теги для поддержания согласованности.

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

Перевод содержимого

Мы переведем наше приложение на два новых языка, кроме английского языка, которые являются испанскими и хиндими. Сделайте три копии файла Messages.xlf и переименуйте их в messages.en.xlf , messages.es.xlf и messages.hi.xlf Отказ Эти имена файлов могут быть настроены в соответствии с вашим выбором, но расширение должно быть .xlf. .

Открывайте сообщения .es.xlf и поместите в него следующий контент.

                    Localization Demo in Angular using i18n        Demostración de localización en angular usando i18n                  app/app.component.html          1                            Hello, My name is Ankit        Hola, mi nombre es Ankit                  app/app.component.html          5

Это тот же контент, что и исходные сообщения .xxlf файл, но мы добавили ET> Тег, соответствующий каждый и л t; источник & g t; ярлык. Тег содержит переведенный текст для C Далее я Внутри тега . Здесь я использую Google Translate для перевода, но в приложениях в реальном времени, языковой эксперт будет Tran шифер Co ntents из файла messages.xlf.

Аналогично, откройте сообщения .hi.xlf и поместите в него следующий контент.

                    Localization Demo in Angular using i18n        I18n का उपयोग कर कोणीय में स्थानीयकरण डेमो                  app/app.component.html          1                            Hello, My name is Ankit        हेलो, मेरा नाम अंकित है                  app/app.component.html          5

Наконец, мы сделаем файл перевода английского языка. Открывайте сообщения .en.xlf и поместите в следующий контент в нем.

                    Localization Demo in Angular using i18n        Localization Demo in Angular using i18n                  app/app.component.html          1                            Hello, My name is Ankit        Hello, My name is Ankit                  app/app.component.html          5

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

Открыть angular.json Файл и добавьте следующую конфигурацию.

"build": {  ...  "configurations": {    ...    "es": {      "aot": true,      "i18nFile": "src/translate/messages.es.xlf",      "i18nFormat": "xlf",      "i18nLocale": "es",      "i18nMissingTranslation": "error"    }  }},"serve": {  ...  "configurations": {    ...    "es": {      "browserTarget": "i18nDemo:build:es"    }  }}

Здесь мы добавили конфигурацию для испанского языка. Мы предоставили путь и формат для файла I18N и установите локаль на «ES». Когда мы выполняем приложение, содержимое приложения будет подано от предоставленного файла i18n.

Точно так же вы можете добавить конфигурацию для других языков.

Исполнение демонстрации

После того, как вы добавили конфигурацию для всех языков в файле Angular.json, запустите следующую команду, чтобы запустить сервер.

ng serve --configuration=es

Это запустит приложение в конфигурации «ES», и наше приложение покажет переводы испанского языка.

Обратитесь к экрану вывода, как показано ниже:

Конфигурации, которые мы определили, только поможет приложению выполняться в локальном компьютере. Мы не можем изменить конфигурацию, как только приложение запущено.

Приложение для производства потребуется приложение для обслуживания для разных языков, просто изменив URL. Например, mywebsite.com/es обеспечит испанскую версию сайта, а mywebsite.com/en предоставит английскую версию. В этом случае приложение будет подано от различных виртуальных каталогов для разных языков. Мы исследуем, как это сделать в следующем разделе.

Изменить компонент приложения для производства

Открыть app.component.ts и положить в следующий код.

import { Component, LOCALE_ID, Inject } from '@angular/core';@Component({  selector: 'app-root',  templateUrl: './app.component.html',  styleUrls: ['./app.component.css']})export class AppComponent {  title = 'i18nDemo';  languageList = [    { code: 'en', label: 'English' },    { code: 'hi', label: 'हिंदी' },    { code: 'es', label: 'Espanol' }  ];  constructor(@Inject(LOCALE_ID) protected localeId: string) { }}

Здесь мы определили список языков и их кодов локали. Эти коды локали являются стандартными кодами. Вы можете легко получить список языков и соответствующие коды локали, простым поиском Google.

Добавьте следующие коды в app.component.html файл.

Здесь мы определили три кнопки на три языка. На каждой кнопке нажмите, идентификатор локали изменится, и идентификатор локали также будет добавлен к URL-адресу. Это позволит нам служить приложению из другого каталога.

Поместите следующий код в app.component.css Файл, чтобы применить стили к этим кнопкам.

.button {  background-color: darkslateblue;  border-radius: 5px;  color: white;  padding: 5px;  width: 10%;  margin: 5px;  text-decoration: none;  cursor: pointer;}

Сценарий для компиляции приложения для производства

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

ng build --prod --i18n-locale es --i18n-format xlf --i18n-file src/translate/messages.es.xlf --output-path=dist/es --baseHref /es/

Давайте понять эту команду. Мы предоставили идентификатор локали для пакета, который «ES» для испанского языка. Мы также предоставляем путь и формат файла I18N. Свойство вывода требуется для предоставления местоположения для пакета приложений. Свойство BASEHREF определяет базовый URL, из которого будет подан этот пакет.

Нам нужно запустить эту команду для каждого языка, который мы предоставим, изменив файл i18n и BASEHREF Значения атрибута. Однако это будет громоздкая задача, если у нас есть много языков. Поэтому мы напишем скрипт для создания пакета для всех языков. Открыть Package.json Файл и добавьте следующие скрипты внутри раздела «Сценарии».

"build-locale:en": "ng build --prod --i18n-locale en --i18n-format xlf --i18n-file src/translate/messages.en.xlf --output-path=dist/en --baseHref /en/","build-locale:es": "ng build --prod --i18n-locale es --i18n-format xlf --i18n-file src/translate/messages.es.xlf --output-path=dist/es --baseHref /es/","build-locale:hi": " ng build --prod --i18n-locale hi --i18n-format xlf --i18n-file src/translate/messages.hi.xlf --output-path=dist/hi --baseHref /hi/","build-locale": "npm run build-locale:en && npm run build-locale:es && npm run build-locale:hi"

Здесь мы создали три сценария для трех языков, которые мы используем. Сценарий «Build-Locale» выполнит всех из них сразу. Все эти скрипты являются парами ключа-значений. Основные имена, которые мы используем здесь, настраиваются, и вы можете использовать любое имя по вашему выбору. Чтобы создать пакет приложений для всех языков, запустите следующую команду:

npm run build-locale

При успешном исполнении он создаст папку «DIST» в корневой папке приложения. Папка Dist имеет три подпапки для обслуживания нашего приложения на трех разных языках. Обратитесь к изображению, показанному ниже:

Развертывание приложения на Firebase

Мы разверним это приложение на Firebase, чтобы увидеть язык языка в режиме реального времени. Обратитесь к моей статье Хостинг приложения Blazor на Firebase И выполните шаги, упомянутые для развертывания этого углового приложения на Firebase.

Как только приложение будет развернуто, вы получите URL-адрес хостинга. Откройте URL-адрес и добавьте атрибут BASEHREF, как мы определили ранее, к URL-адресу. Следовательно, URL будет yoursite.com/es/ для испанского языка и так далее.

Приложение, которое мы построили здесь, размещены в https://i18ndemo-415ef.firebaseapp.com/en/ Отказ Если вы откроете этот URL, вы увидите вывод, как показано ниже:

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

Заключение

В этом посте мы научились интернационализировать ваше угловое приложение, используя инструменты I18N. Мы также применили локализацию на наше угловое приложение. Локализация позволяет нам служить нашему приложению на разных языках, что помогает в расширении досягаемости до всемирной аудитории. Мы также узнали, как локализация работает в производственной среде, развернув наше приложение на FireBase.

Получить исходный код от Github и играть вокруг для лучшего понимания.

Вы готовитесь к интервью?! Прочитайте мою статью о C # Кодирование вопросов для технических интервью

Смотрите также

Первоначально опубликовано в https://ankitsharmablogs.com/

Оригинал: “https://www.freecodecamp.org/news/how-to-implement-localization-in-angular-using-i18n-tools-a88898b1a0d0/”