Как реализовать multi-language поддержку (i18n)?angular-53

Angular предоставляет несколько подходов для интернационализации (i18n) приложений. Рассмотрим основные методы с примерами реализации.

1. Встроенный механизм i18n

Подход: Разные сборки для разных языков.

Шаги реализации:

  1. Разметка текста в шаблонах:
<h1 i18n="@@welcomeHeader">Welcome</h1>
<p i18n="@@welcomeMessage">Hello, user!</p>
  1. Извлечение сообщений:
ng extract-i18n --output-path src/locale
  1. Создание переводов (messages.fr.xlf):
<trans-unit id="welcomeHeader">
  <source>Welcome</source>
  <target>Bienvenue</target>
</trans-unit>
  1. Сборка для конкретного языка:
ng build --prod --i18n-file src/locale/messages.fr.xlf --i18n-format xlf --i18n-locale fr

Плюсы:

  • Высокая производительность
  • Поддержка плюрализации и гендерных форм

Минусы:

  • Требует пересборки при изменении переводов
  • Нет возможности смены языка в runtime

2. Динамическая подгрузка переводов

Подход: Загрузка переводов во время выполнения.

Установка:

npm install @ngx-translate/core @ngx-translate/http-loader

Настройка модуля:

import { TranslateModule, TranslateLoader } 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]
      }
    })
  ]
})

Файлы переводов :

{
  "welcome": {
    "header": "Welcome",
    "message": "Hello, user!"
  }
}

Использование в компонентах:

constructor(private translate: TranslateService) {
  translate.setDefaultLang('en');
  translate.use('en');
}

Шаблоны:

<h1>{{ 'welcome.header' | translate }}</h1>
<p [translate]="'welcome.message'"></p>

Плюсы:

  • Смена языка без перезагрузки
  • Простота обновления переводов
  • Поддержка загрузки с сервера

Минусы:

  • Меньшая производительность
  • Нет встроенной поддержки плюрализации

3. Гибридный подход

Комбинация статической и динамической загрузки:

  • Основной контент через встроенный i18n
  • Динамический контент через ngx-translate

4. Продвинутые техники

Плюрализация:

// en.json
{
  "inbox": {
    "zero": "No messages",
    "one": "One message",
    "other": "{{count}} messages"
  }
}

<div [translate]="'inbox'" [translateParams]="{count: messages.length}"></div>

Локализация дат и чисел:

// В компоненте
today = new Date();
value = 1234.56;

// В шаблоне
<p>{{ today | date:'fullDate' }}</p>
<p>{{ value | number }}</p>

Переключение языка:

changeLanguage(lang: string) {
  this.translate.use(lang);
  localStorage.setItem('userLanguage', lang);

  // Для дат/чисел
  this.localeId = lang;
}

Лучшие практики

  1. Организация переводов:

    • Группируйте по функциональности
    • Используйте namespace-ы
    • Избегайте дублирования ключей

  2. Работа с динамическими значениями:

{
  "greeting": "Hello, {{name}}!"
}

<p [translate]="'greeting'" [translateParams]="{name: userName}"></p>

  1. Инструменты:

    • Используйте редакторы XLF (OmegaT, Poedit)
    • Автоматизируйте извлечение ключей
    • Интегрируйте с системами перевода (Crowdin, Transifex)

  2. SEO оптимизация:

    • Используйте разные URL для языков (/en/, /fr/)
    • Добавьте hreflang в head

Резюмируем

Angular предлагает гибкие решения для i18n - от статической компиляции до динамической загрузки переводов. Выбор подхода зависит от требований проекта: для высоконагруженных приложений лучше подходит встроенный i18n, для динамических систем - ngx-translate. Гибридный подход дает преимущества обоих методов.

Вопросы

Собеседования