Начните с переключения языка у корневого элемента приложения и привяжите его к поставщику, который хранит текущий язык и загружает сообщения.. Use a selectbox to present options and connect its change событие для обновления локали.
In typescript проекты, в основном define сообщения как карта для каждого языка, register them with the i18n provider, и предоставить переводчика через binding on your page templates.
Use converters чтобы форматировать числа и даты и обрабатывать множественное число, чтобы строки пользовательского интерфейса оставались корректными на разных языках. Создайте небольшой, локальный сообщения загружать его при запуске, чтобы избежать появления вспышки непереведенного текста.
Когда пользователь выбирает язык в language-switch, приложение обновляет локаль и перезагружается. сообщения. Если локаль становится Translation not available or invalid., использовать английский язык. Если вы wanted the app to reflect changes immediately, trigger a changed событие и повторная привязка затронутых компонентов.
Поддерживайте организованность переводов: храните ключи в одном пространстве имен, используйте легкий page layout, and just write tests that exercise register and binding flows. Если вы want чтобы ускорить адаптацию, определите общий словарь для распространенных фраз и задокументируйте поддерживаемые языки. Обновить сообщения and converters по мере роста вашего приложения.
Шаг 1: Установите плагин aurelia-i18n и добавьте файл translation.json
Install aurelia-i18n plugin and add a translation.json to your project now to enable i18n from the start. Use jspm to align with a bundled workflow or npm for modern builds: jspm install aurelia-i18n --dev; npm i aurelia-i18n --save.
Создайте легковесный обертку, которая подключает плагин к жизненному циклу Aurelia. Обертка обрабатывает загрузку данных локали и предоставляет простую функцию перевода. Ожидайте преобразователей для форматирования чисел и дат, и подключите их к привязке, чтобы сделать одиночным converter handles common formatting while converters может быть расширен для особых нужд.
Поместите translation.json рядом с вашей точкой входа и ссылайтесь на него через загрузчик. Типичный путь — src/assets/i18n/translation.json, и файл должен быть собран с приложением, чтобы обеспечить его доступность при запуске, включая в Safari, где кэширование в автономном режиме может повлиять на загрузку.
Example structure for translation.json: { "messages": { "greeting": "Hello, {name}!" }, "labels": { "save": "Save" } }
Стратегические заметки: используйте неопределенные ключи для общих, многоразовых строк и конкретные ключи для фрагментов пользовательского интерфейса. Выбранные ключи отображаются на необходимые части пользовательского интерфейса, поэтому желаемые фразы остаются читаемыми в коде, и переводчики могут возвращать точные результаты. Проект должен развиваться за счет добавления новых ключей в разделы messages и labels по мере изменения функций, не нарушая существующие переводы.
Если вы используете aureliavalidation-i18n, выравнивайте сообщения об ошибках валидации в файле translation.json, чтобы обертка могла предоставлять понятную пользователю обратную связь. Протестируйте в разных браузерах, включая Safari, чтобы убедиться, что собранные ресурсы загружаются правильно и что изменения локали отражаются немедленно в пользовательском интерфейсе, и картина должна проясниться.
Шаг 2: Создайте папки и файлы (src/i18n, locales, app.js, main.js)
Создайте папки и файлы сейчас и подключите aurelia-i18n к вашему Aurelia приложению, чтобы локализация загружалась при запуске через бэкенд, который предоставляет данные о локали. Разместите исходную логику i18n в src/i18n, и организуйте переводы в locales; придерживайтесь соглашений об именах Aurelia, чтобы избежать конфликтов.
- Структура папок и назначение
- src/i18n: содержит конфигурацию, конвертеры и любые пользовательские адаптеры i18n.
- locales: хранятся JSON-пакеты для каждого языка, загружаемые с помощью шаблона файловglob, например locales/**/*.json.
- app.js: export a
configureфункция, которая регистрирует плагин i18n, бэкенд и локаль по умолчанию (выбранную). - main.js: bootstrap Aurelia, зарегистрировать плагин i18n и запустить приложение с привязкой для установки локали и языковых сообщений.
- app.js configuration
- Экспортируемая функция:
export function configure(aurelia){ ... } - Предоставьте бэкенд-загрузчик для получения файлов локали из пути locales, используя
filesgloblikelocales/**/*.json. - Register
aurelia-i18nand set default locale viaselected. - Expose a
formatпомощника или конвертеров, если вам требуется нестандартное форматирование дат или чисел.
- Экспортируемая функция:
- Основной вход и привязка во время выполнения
- main.js запускает Aurelia и создает привязку для элемента селектора языка, например, для компонента а
<selectbox>bound toselected. - Use
labelключа отlocalesчтобы отображать динамический текст:${firstname}из привязанных данных (имя пользователя берется из вашей модели представления). - Вернуть настроенный экземпляр приложения, чтобы навигация и маршрутизация работали с локализованным контентом.
- main.js запускает Aurelia и создает привязку для элемента селектора языка, например, для компонента а
- Сообщения и привязка времени выполнения
- В шаблонах представлений связывайте с ключами i18n с помощью привязки или вспомогательной функции, например, ,
t('messages.greeting', { firstname: firstname }). - Предоставьте несколько именованных переводов, например
orderandselected, чтобы продемонстрировать переключение локали без полной перезагрузки. - Определите заполнители и форматирование в
сообщенияto support dynamic values likefirstnameandaureliasnaming.
- В шаблонах представлений связывайте с ключами i18n с помощью привязки или вспомогательной функции, например, ,
Пример организации в локалях
- locales/en-US.json
- locales/de-DE.json
- { "intl.Date.getFullYear": "г.", "intl.Number.toFixed": "₽" }
Совет: используйте filesglob чтобы автоматически загружать все переводы, например, , locales/**/*.json. В ваших сообщениях сохраняйте ключи плоскими или группируйте их под label and сообщения, чтобы связывание, такое как binding="i18n.t('messages.welcome', { firstname: firstname })" остается чистым и конкретным.
Step 3: Use a plugin with TypeScript and Aurelia's loader
Install aurelia-i18nt and register it with Aurelia's loader in your TypeScript bootstrap to enable dynamic translation loading. This setup lets the loader fetch translation bundles on demand, so you don't ship all strings upfront. Use the option backend with a loadPath указывает на ваш сервер или статические файлы и устанавливает значение по умолчанию fallbackLocale.
Configure backend, чтобы загрузчик мог запрашивать файлы для каждого пространства имен, такие как /i18n/en/common.json или /i18n/en/home.json. Если ключ отсутствует, это может быть Translation not available or invalid., чтобы вы могли показать исходный ключ или удобное значение по умолчанию. Обработайте ошибки с помощью try/catch вокруг запроса и запишите их в window.console для отладки.
Example: в шаблоне привяжите к переводам с помощью сервиса i18n. Используйте ключи, такие как firstname to render the user's given name and support a namespace greeting. Example: binding with i18n.t('greeting.firstname') or i18n.t('home:firstname') covers different contexts.
TypeScript tip: обеспечьте типизированный доступ к ключам, объявив небольшой интерфейс и обернув вызов t(). Это становится specific в ваш проект и помогает с binding в шаблонах. Если компилировать с строгим режимом, проверки на неопределённость становятся видимыми во время компиляции.
Обработка событийотслеживать изменения локали через событие плагина, а затем вызывать метод обновления для перезагрузки пакетов пространств имен. Это изменение распространяется через ваши binding обновления, чтобы компоненты отражали новый язык без ручного манипулирования DOM.
Backend options: размещайте переводы на выделенном бэкенде или подавайте их как статические ресурсы. В простой настройке вы вызываете... request to fetch /locales/{lng}/{ns}.json и хранить результаты в памяти для быстрого доступа. Загрузчик would provide служит запасным вариантом, когда запрошенный ресурс не найден. Это станет мощным инструментом, когда вы подключитесь к реальному бэкенду, и вы сможете search для охвата случаев, когда пользователи назвали их в пользовательском интерфейсе, ключи по загруженным пространствам имен.
Советы по производительности: Предзагрузка общих пространств имен во время запуска приложения, кэширование результатов и предотвращение повторных сетевых вызовов. Используйте around для получения необходимых пакетов, а затем cover others on demand. When you test, verify that the key firstname корректно разрешается между компонентами, и что неизвестный ключ отображает значение по умолчанию или сам ключ.
Шаг 4: Структурируйте файл JSON с переводами и ключи
Используйте единый файл перевода для английской локали и поместите его в папку locales. Загружайте дополнительные фрагменты с помощью шаблона, похожего на glob, чтобы обновления оставались централизованными без ручных изменений. Сохраняйте структуру дерева неглубокой и логичной, чтобы поддерживать быстрый поиск при рендеринге пользовательского интерфейса.
Организуйте по областям функций: заголовок, контент и действия. Внутри каждой области назначьте короткие метки для строк пользовательского интерфейса. Пример:
{
"header": { "title": "Welcome", "subtitle": "App Guide" },
"content": { "welcome": "Hello" },
"actions": { "submit": "Submit" }
}
Создайте TypeScript тип, который соответствует форме JSON. Этот тип уточняет структуру, а редакторы предлагают автозаполнение. Компактный подход поддерживает согласованность как проверок во время выполнения, так и проверок во время компиляции.
Handle date-like strings with simple placeholders and a separate formatting utility. Example: "today": "Today is {date}". The runtime applies a date formatter or a dedicated function, keeping strings readable and plain.
По мере появления новых экранов расширяйте существующее дерево для поддержания согласованности. Используйте центральный файл отображения в качестве источника истины и поддерживайте небольшой набор корневых разделов.
Загрузка заметок: используйте загрузчик для получения JSON и применения строк по пути, например, header.title или content.welcome.
Примерный фрагмент:
{
"header": { "title": "Welcome", "subtitle": "App Guide" },
"content": { "welcome": "Hello" }
}
Шаг 5: Установка локали и реализация выпадающего списка выбора локали
Привяжите элемент управления переключением языка к активному локали и активируйте изменение в провайдере i18n, когда пользователь выбирает новый язык.
Настройте i18n с помощью i18next-xhr-backend и filesglob, чтобы переводы плавно загружались по всему проекту. Такой подход охватывает загрузку файлов JSON для каждого региона, поддерживает организованность ключей и поддерживает даты, а также сообщения, специфичные для региона. Используйте провайдер для сохранения выбранного языка, чтобы пользователи видели правильный контент при последующих запросах.
Implementation details
// View-model
import { I18N } from 'aurelia-i18n';
export class App {
static inject = [I18N];
constructor(i18n) {
this.i18n = i18n;
this.locale = localStorage.getItem('locale') || 'en';
}
changeLocale(locale) {
this.locale = locale;
this.i18n.setLocale(locale);
localStorage.setItem('locale', locale);
}
}
<select value.bind="locale" change.delegate="changeLocale(locale)">
<option value="en">English</option>
<option value="ru">Русский</option>
<option value="es">Español</option>
</select>
В настройке бэкенда используйте i18next-xhr-backend с loadPath и filesglob для охвата всех файлов локали. Пример: backend: { loadPath: '/locales/{{lng}}/{{ns}}.json', filesGlob: '**/*.json' }. Эта конфигурация поддерживает конкретные языковые пакеты и позволяет избежать отсутствующих ключей во время запросов. Для сообщений об ошибках проверки и дат подключите aureliavalidation-i18n к вашим формам, чтобы обратная связь адаптировалась к текущему местоположению, и убедитесь, что поставщик остается единственным источником достоверной информации о языке.
Шаг 6: Просмотр, модульные тесты и сохраненные поиски для фильтрации результатов
Свяжите все метки пользовательского интерфейса с ключами локали и отобразите панель сохраненных поисков для фильтрации результатов. Существует четкий путь, используя jspm для загрузки aurelia-i18n и полифиллов windowintl, а затем расширьте скомпилированный загрузчик для получения локальных пакетов из бэкенда или статических файлов. С этой настройкой интерфейс естественным образом обновляется при изменении локали, обеспечивается плавное возвращение к предыдущим фильтрам, и жизненный цикл пользовательского интерфейса остается согласованным. Используйте объект параметров для обмена языком, регионом и форматами дат по всему представлению, чтобы обеспечить целостное впечатление.
Чтобы сохранить скорость работы интерфейса, реализуйте преобразователь значений для дат и чисел и подключите его к текущей локали. Пример: DateValueConverter форматирует даты через windowintl, если он доступен; в противном случае он переключается на ISO. Исходные файлы typescript в aurelia-framework обрабатывают логику преобразователя, и вы можете зарегистрировать преобразователь глобально. Ключи меток управляют всеми строками, а панель сохраненных поисков также использует метки, учитывающие локаль. Этот подход было бы просто адаптировать в другом модуле, и он масштабируется с увеличением числа локалей.
Привязки к представлению и преобразователи значений
В aurelia-framework привязывайте текст к i18n ключам с помощью привязки t или i18n.bind, и используйте valueconverter для форматирования дат с форматами, выбранными локалью. Загрузчик может загружать ресурсы из объединенных активов или бэкенда, и вы можете использовать jspm для управления зависимостями времени выполнения. Убедитесь, что даты и валюты отображаются последовательно в Safari путем включения необходимых полифилов и тестирования с windowintl. Пример файлов локали (en.json, fr.json) хранят значения меток в простых строках, чтобы переводы оставались поддерживаемыми.
Юнит-тесты и сохраненные поиски
Напишите модульные тесты с использованием aurelia-testing, чтобы проверить, что представление отображает локализованные строки и что сохраненные поиски правильно фильтруют результаты. Расширьте тесты, чтобы охватить DateValueConverter в различных локалях, и убедитесь, что сохраненные поиски сохраняются в localStorage и восстанавливаются при перезагрузке. В тестах используйте фиктивный бэкенд, если это необходимо, и проверьте, что загрузчик возвращает пакеты для каждой локали. После завершения запустите тесты в предпочитаемом исполнителе; это снизит риск регрессий и поможет вам расширить покрытие i18n там и обратно.
