Как реализовать интернационализацию (i18n)?
Интернационализация (i18n) в Angular — это механизм, позволяющий адаптировать интерфейс приложения под разные языки и локали. Angular предоставляет встроенные средства для i18n, а также поддерживает внешние библиотеки, такие как @ngx-translate/core, которые позволяют реализовать динамическую смену языка без перекомпиляции приложения.
1. Интернационализация с помощью встроенного Angular i18n
1.1 Активация i18n в шаблоне
Чтобы отметить строку как переводимую, используется директива i18n:
<h1 i18n>Добро пожаловать</h1>
<button i18n="@@submitBtn">Отправить</button>
Атрибуты:
-
i18n — пометка текста для перевода;
-
@@submitBtn — кастомный ID для строки (опционально);
-
i18n-title, i18n-placeholder и т.п. — для атрибутов:
<input type="text" placeholder="Введите имя" i18n-placeholder />
1.2 Генерация xlf-файла переводов
Для извлечения строк переводов используется Angular CLI:
ng extract-i18n --output-path src/locale
Это создаёт файл messages.xlf (или .xtb, .json при других опциях).
1.3 Перевод и локализация
Создаются копии файла messages.xlf для каждого языка:
-
messages.ru.xlf
-
messages.en.xlf
-
messages.uz.xlf
В каждом — оригинальные строки и их переводы:
<trans-unit id="submitBtn">
<source>Отправить</source>
<target>Submit</target>
</trans-unit>
1.4 Конфигурация angular.json
Для каждого языка добавляются сборки:
"projects": {
"app-name": {
"architect": {
"build": {
"configurations": {
"ru": {
"localize": \["ru"\],
"outputPath": "dist/app-ru",
"i18nFile": "src/locale/messages.ru.xlf",
"i18nLocale": "ru",
"i18nFormat": "xlf"
},
"en": {
"localize": \["en"\],
"outputPath": "dist/app-en",
"i18nFile": "src/locale/messages.en.xlf",
"i18nLocale": "en",
"i18nFormat": "xlf"
}
}
}
}
}
}
1.5 Сборка с локалью
ng build --configuration=ru
ng build --configuration=en
1.6 Отображение дат, валют и чисел
Используются пайпы:
{{ today | date:'longDate':'':'ru' }}
{{ price | currency:'RUB':'symbol-narrow':'1.2-2':'ru' }}
Локаль должна быть зарегистрирована в main.ts:
import { registerLocaleData } from '@angular/common';
import localeRu from '@angular/common/locales/ru';
registerLocaleData(localeRu);
2. Динамическая интернационализация с @ngx-translate/core
Встроенная i18n требует сборки под каждый язык. Для динамической смены языка в рантайме применяется ngx-translate.
2.1 Установка
npm install @ngx-translate/core @ngx-translate/http-loader
```python
#### **2.2 Настройка TranslateModule**
```python
import { HttpClient } from '@angular/common/http';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http, '/assets/i18n/', '.json');
}
@NgModule({
imports: \[
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: \[HttpClient\]
}
})
\]
})
export class AppModule {}
2.3 Структура файлов переводов
Создаётся папка assets/i18n/:
-
en.json
-
ru.json
-
uz.json
// ru.json
{
"WELCOME": "Добро пожаловать",
"SEND": "Отправить"
}
2.4 Использование в шаблоне
<h1>{{ 'WELCOME' | translate }}</h1>
<button>{{ 'SEND' | translate }}</button>
2.5 Смена языка в рантайме
constructor(private translate: TranslateService) {
translate.addLangs(\['en', 'ru', 'uz'\]);
translate.setDefaultLang('ru');
const browserLang = translate.getBrowserLang();
translate.use(browserLang.match(/en|ru|uz/) ? browserLang : 'ru');
}
// Программно:
this.translate.use('en');
2.6 Перевод в TS
this.translate.get('WELCOME').subscribe((res: string) => {
console.log(res);
});
2.7 Параметры в строках
{
"HELLO_USER": "Привет, {{name}}"
}
<p>{{ 'HELLO_USER' | translate:{ name: 'Алексей' } }}</p>
2.8 Использование с директивой translate
<p translate>WELCOME</p>
2.9 Асинхронная подгрузка переводов
Файлы могут загружаться динамически в зависимости от конфигурации или типа пользователя.
3. Поддержка языка через маршруты
Можно использовать параметры URL:
{ path: ':lang/home', component: HomeComponent }
И автоматически переключать язык в зависимости от параметра:
this.translate.use(this.route.snapshot.params\['lang'\]);
4. Настройка локали Angular
В app.module.ts:
providers: \[
{ provide: LOCALE_ID, useValue: 'ru' }
\]
Для динамического изменения можно использовать APP_INITIALIZER или кастомный LOCALE_ID через InjectionToken.
5. Angular Localize (Angular 9+)
Можно подключить @angular/localize для использования $localize в коде:
ng add @angular/localize
import '@angular/localize/init';
console.log($localize\`Пример перевода\`);
6. Сравнение Angular i18n и ngx-translate
| Возможность | Angular i18n | ngx-translate |
|---|---|---|
| Поддержка динамической смены языка | ❌ (только при сборке) | ✅ |
| --- | --- | --- |
| Простота настройки | Средняя | Простая |
| --- | --- | --- |
| Работа в шаблоне и коде | ✅ | ✅ |
| --- | --- | --- |
| Форматы переводов | XLF | JSON |
| --- | --- | --- |
| Поддержка параметров и вложенности | Ограничена | Расширенная |
| --- | --- | --- |
| Работа с лэйаутом, атрибутами и aria | ✅ | Частично |
| --- | --- | --- |
Интернационализация в Angular может быть реализована как через встроенные средства с i18n, так и с помощью сторонних библиотек вроде ngx-translate. Выбор зависит от требований: если нужен простой и стабильный перевод с предкомпиляцией — подходит встроенный i18n. Если необходима динамическая смена языка и работа с JSON — лучше использовать ngx-translate.