Локализация

Конфигурирование поддерживаемых языков

Конфигурирование поддерживаемых языков осуществляется с помощью файлаrootapp/assets/data/i18n/languages.json. Этот файл представляет собой следующую структуру:

{
  "default" : "ru",
  "list" : [
    {
      "code" : "ru",
      "name" : "Русский"
    },
    {
      "code" : "en",
      "name" : "English"
    }
  ]
}

Здесь можно выбрать язык по умолчанию и указать список поддерживаемых языков.

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

Локализация меню

При переключении языка, будет происходить запрос к меню. Ссылка до меню строится так:assets/data/menu.<LANG>.json. Если меню по этому адресу не обнаружено, оно будет загружено изassets/data/menu.json.

Рассмотрим пример. При переключении на английский язык, будет загружен файлassets/data/menu.en.jsonи произойдёт перерисовка меню.

Локализация проекта

Для локализации собственного проекта, используйте библиотеку transloco (opens in a new tab).

После успешной установки, в папкеsrc/assets/i18nбудут сгенерированны файлы соответствующие выбранным языкам. В них можете задать свой перевод как отдельных слов, так и текста.

В качестве ключей мы используем фразы русского языка, поэтому соответствующий файл может оставаться пустым. Но если же вы будете использовать уникальные ключи, то в этом файле должны быть пары ключ-значение для соответствующего языка. Например:"I18N_HOME_PAGE": "Домашняя страница"

{
  "Поиск": "Search",
  "Конфигурирование поддерживаемых языков": "Configuring supported languages",
}

После вassetsсоздайте папку с уникальным именем (например, наименование проекта) и переместите папкуi18nв неё.

Затем в файлеtransloco-root.module.tsотредактируйте url запроса.

getTranslation(lang: string): Observable<Translation> {
    return this.http.get<Translation>(`/assets/YOUR_PBC_NAME/i18n/${lang}.json`);  // где YOUR_PBC_NAME - это название созданной папки в assets.
  }

А подписаться на изменение языка в рутовом приложении можете с помощью события onLanguageChange:

import { ApplicationRef, NgModule } from '@angular/core';
import { QEventsService } from '@diasoft/qpalette-visual';
import { TranslocoService } from '@ngneat/transloco';
@NgModule({
  ...
})
export class TranslocoRootModule {
  constructor(
    private readonly qEventsService: QEventsService,
    private readonly translocoService: TranslocoService,
    private readonly appRef: ApplicationRef
  ) {
    // Это необходимо, так как передача события между веб-компонентом и рутовым приложением происходит вне NgZone
    merge(
      this.translocoService.events$,
      this.translocoService.langChanges$
    )
      .pipe(debounceTime(100))
      .subscribe(() => {
        this.appRef.tick();
      });
 
    this.qEventsService.onLanguageChange().subscribe(data => {
      this.translocoService.setActiveLang(data.payload.language);
    });
  }
}

Включение заголовка Accept-Language при запросах к серверу

Часто при запросе к серверу, нужно дать ему понять, на каком языке пользователь ожидает ответ. Для этого у нас подготовлен LanguageInterceptor. Он добавляет заголовок Accept-Language, соответствующий текущему языку рутового приложения. Подключите его в виде HTTP-перехватчика кtransloco-root.module.ts:

import { LanguageInterceptor } from '@diasoft/qpalette-core';
 
providers: [
  ...,
  {
    provide: HTTP_INTERCEPTORS,
    useClass: LanguageInterceptor,
    multi: true,
  },
]

Тестирование локального веб-компонента на стенде Плагины (виджеты)