Интернационализация приложений (i18n) направлена на то, чтобы сделать приложения доступными и удобными для мировой аудитории. Вы можете локализовать свое приложение angular, используя встроенные инструменты или сторонние библиотеки.
Когда вы используете встроенные инструменты Angular i18n для локализации вашего приложения, вам нужно принять второе решение: хотите ли вы использовать компилятор Ahead-of-Time (AOT) или компилятор Just-in-Time (JIT) . С AOT ваше приложение может быть обслужено быстро, а ваши пользователи получат выгоду от более высокой производительности. В качестве недостатка вам необходимо обслуживать приложение для каждой локали, поскольку вся информация, включая контент, встроена при компиляции приложения. Решение о том, какой язык следует показывать пользователям, должно происходить с помощью логики на стороне сервера или с помощью параметров URL. Если вы выберете JIT, переводы будут динамическими, но вам нужно позаботиться о переводе в свое приложение. Однако имейте в виду, что в этом случае производительность может снизиться.
Также есть возможность выбрать стороннюю библиотеку для интернационализации. Сегодня мы обсудим и воспользуемся одной из самых популярных библиотек ngx-translate. Библиотеку можно использовать как для JIT, так и для AOT-скомпилированных версий вашего приложения.
Ngx-translate - это библиотека интернационализации для Angular, которая пытается закрыть пробел между недостающими функциями встроенных функций интернационализации.
Создать проект Angular 4+
Мы используем @ angular / cli для создания нового проекта с именем translation-app в терминале:
ng new translation-app
Настроить проект
Используйте следующие команды для установки и загрузки библиотеки ngx-translate. Используйте npm в своем терминале в папке проекта Translation-App
npm install @ngx-translate/core npm install @ngx-translate/http-loader
Импортируйте необходимые модули в основной модуль app.module.ts:
Добавьте функцию в app.module.ts, которая возвращает TranslateHttpLoader и экспортирует его (требуется AoT). В этом случае функция HttpLoaderFactory, которую мы создаем, возвращает объект, который может загружать переводы с использованием Http и .json, но вы можете написать свой собственный класс, который, например, использует глобальную переменную JavaScript вместо загрузки файла или использует Google Translate :
Теперь нам нужно импортировать наши модули в @NgModule, который сообщает Angular загрузить этот модуль в ваш AppModule:
Вставьте TranslateService
В app.component.ts мы теперь импортируем и запускаем TranslateService:
Затем внутри класса AppComponent мы внедряем службу перевода и предоставляем язык по умолчанию.
Создайте файлы перевода .json
Теперь мы создаем наши файлы перевода внутри папки assets / i18n:
src / assets / i18n / en.json
src / assets / i18n / fr.json
Это простые файлы .json, которые будут загружены нашим TranslateHttpLoader, созданным в app.module.ts.
Переведите простые заголовок и введение
В app.component.html мы добавляем заголовок с директивой translate внутри тега h1. Эта директива берет текст внутри тега и заменяет его соответствующим переводом. Если вы используете директиву, вы должны убедиться, что внутри тега нет ничего, кроме текста.
В качестве второго примера мы используем TranslationPipe для перевода метки с помощью define как встроенной строки. Поскольку иногда у нас есть значение внутри перевода, которое мы хотим заменить, мы можем передать объект данных в конвейер перевода.
Интегрировать переключатель языка
В app.component.ts теперь мы добавляем функцию переключения языка для переключения языка.
Теперь мы можем прикрепить нашу функцию переключения языка, которую мы только что определили в app.component.ts, к кнопке. В этом случае мы создаем кнопку для каждого языка и вызываем функцию switchLanguage () с соответствующей клавишей языка.
Перевести предложение с переменной
Как упоминалось ранее, иногда у вас есть предложения, содержащие переменные. В этом небольшом примере у нас есть объект пользователя со свойствами age и name внутри app.component.ts, и мы хотим перевести предложение, которое будет содержать эти значения:
Поскольку мы передаем этот объект в конвейер перевода, теперь мы можем использовать его свойства в нашем переводе в нотации {{placeholder}}.
src / assets / i18n / en.json
src / assets / i18n / fr.json
Использование вложенных объектов .json
Если вы хотите иметь больший контроль над своим переводом и, например, переводить блоки страниц (с точки зрения конечного пользователя) или компоненты (с точки зрения разработчика), одним из решений может быть следующее; использовать вложенные объекты .json. Пример может выглядеть так в файлах .json:
src / assets / i18n / en.json
src / assets / i18n / fr.json
А теперь обновите в соответствующем шаблоне app.component.html:
Вот и все. Теперь у вас есть базовое понимание того, как использовать локализацию в приложении Angular. Присоединяйтесь к миру!
Для полного кода вы можете найти ссылку на github здесь.
Первоначально опубликовано на blog.imaginea.com.