Управление переводами

Angular предоставляет встроенный механизм интернационализации (i18n) для управления текстовыми переводами в приложении. Основная цель — обеспечение многоязычной поддержки без дублирования кода и интерфейсов.

Маркировка текста для перевода

Для идентификации строк, подлежащих переводу, используется директива i18n:

<h1 i18n="@@homepageTitle">Главная страница</h1>
<p i18n>Добро пожаловать в приложение!</p>
  • Атрибут i18n сообщает компилятору Angular, что содержимое должно быть включено в файл переводов.
  • Тег @@homepageTitle задает уникальный идентификатор сообщения, чтобы избежать конфликтов при множественных переводах.

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

Файлы переводов создаются в формате XLIFF (.xlf) или XMB и содержат сопоставление идентификаторов с текстами на разных языках:

<trans-unit id="homepageTitle" datatype="html">
  <source>Главная страница</source>
  <target>Home Page</target>
</trans-unit>

Каждый trans-unit соответствует одной фразе или блоку текста в приложении.

Подключение и использование переводов

Angular CLI позволяет собирать приложение с нужной локализацией, указывая файл переводов:

ng build --localize

или для конкретного языка:

ng build --configuration=fr

В рантайме Angular автоматически подставляет переводы из соответствующего файла. Это обеспечивает:

  • централизованное управление переводами;
  • возможность динамического изменения языка интерфейса;
  • поддержку нескольких языков без изменения компонентов.

Динамическая смена языка

Для динамического управления языком используется сервис Transloco или @ngx-translate/core. Пример с ngx-translate:

import { TranslateService } from '@ngx-translate/core';

@Component({ ... })
export class AppComponent {
  constructor(private translate: TranslateService) {
    translate.setDefaultLang('ru');
  }

  switchLanguage(lang: string) {
    this.translate.use(lang);
  }
}

Такой подход позволяет изменять язык интерфейса без перезагрузки приложения, что критично для SPA (Single Page Application).

Контекст и плурализация

Angular i18n поддерживает контекст и множественное число, что особенно важно для правильного отображения чисел, дат и грамматических форм:

<p i18n="@@itemsCount">У вас {{ count }} предмет(ов)</p>

В файле перевода задаются правила для разных языков:

<target>
  <x id="INTERPOLATION">You have {{ count }} item(s)</x>
</target>

Это позволяет корректно обрабатывать языковые особенности без дополнительного кода.

Оглавление