Интернационализация Angular приложение с помощью ngx-translate 

В какой-то момент вашему веб-приложению может потребоваться обслуживание многоязычной базы пользователей. Интернационализация, или, если коротко, i18n, - это процесс, с помощью которого вы можете сделать ваше приложение пригодным для использования на другом родном языке. Хотя Angular обладает некоторой встроенной функциональностью i18n, ngx-translate - это сторонний пакет, который упрощает процесс.

Приступим

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

$ npm i @ngx-translate/core --save

Теперь импортируйте TranslateModule в свой AppModule.

...
@NgModule({
 imports: [
   BrowserModule,
   TranslateModule.forRoot()
 ],
 bootstrap: [AppComponent]
})
...

Это в основном все, что вам нужно сделать, чтобы получить доступ к сервису перевода, пайпу и директиве. Однако, если вы не планируете добавлять каждый перевод вручную с помощью кода, вы, вероятно, захотите добавить немного конфигурации на этом этапе, чтобы облегчить загрузку ваших переводов.

Загрузчик

Вероятно, наиболее распространенный способ загрузки переводов - это включить файлы переводов в качестве ресурсов и загрузить их через TranslateHttpLoader, который доступен в отдельном npm пакете.

$ npm install @ngx-translate/http-loader --save

// ...
export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http);
}
@NgModule({
  imports: [
    BrowserModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: createHttpLoader, // экспортированная factory функция, необходимая для компиляции в режиме AoT
        deps: [HttpClient]
      }
    })
  ],
  bootstrap: [AppComponent]
})
// ...

Вы можете создать свой собственный загрузчик - просто внедрите TranslateLoader интерфейс и предоставьте его в своем модуле, как описано выше.

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

Создание загрузчика перевода предполагает, что в вашем проекте будет файл в папке /assets/i18n/ с именем {lang}.json, где {lang} это язык файла, который вы используете для переводов. Для английского языка этот файл может быть en.json, например. Вы можете изменить путь и расширение файла по умолчанию, предоставив конструктору дополнительные параметры new TranslateHttpLoader().

Файл перевода - это просто объект JSON, где ключ описывает переводимый текст, а значение - это фактический текст на языке, указанном в файле. Значением также может быть другой объект, который позволяет группировать переводы так, как вам удобно.

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

{
 "welcomeMessage": "Thanks for joining, {{ firstName }}! It's great to have you!",
 "login": {
   "username": "Enter your user name",
   "password": "Password here",
 }
}

Доступ к переводам

Прежде чем вы сможете получить доступ к этим переводам в вашем приложении, вы должны инициализировать некоторые свойства в TranslateService. Вероятно, лучшее место, чтобы сделать это в вашей AppComponent.

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(translate: TranslateService) {
    translate.addLangs(['en', 'klingon'])
    translate.setDefaultLang('en');
    translate.use('en');
  }
}

Прежде всего, translate.addLangs([]) сообщает сервису, какие языки доступны для переводов. Метод translate.setDefaultLang('en') позволяет указать запасной набор переводов, который будет использоваться в случае, если для текущего языка отсутствуют переводы. translate.use('en') сообщает службе, какой язык используется для перевода. Параметром для всех этих языков является язык, с которого вы хотите получать переводы - они должны соответствовать именам файлов JSON, которые определяют переводы для этих языков.

С этой настройкой у вас есть три способа получить доступ к переводам. Какой из них вы используете в любой момент времени, будет соответствовать вашим потребностям и предпочтениям.

TranslateService

Используя сервис, есть два способа получить ваши переводы. Первый и рекомендуемый метод заключается в использовании get(key: string|Array, interpolateParams?: Object). Это возвращает Observable и, как таковой, является асинхронным , что гарантирует загрузку файла перевода перед использованием значения. Observable затем завершается, как только значение извлекается. Второй метод заключается в использовании instant(key: string|Array, interpolateParams?: Object), который является синхронным . Если файл перевода не будет загружен в тот момент, когда вы используете этот метод, вы вообще не получите перевод.

Помните, что мы указали сервису в качестве текущего языка en, поэтому все результаты перевода будут получены en.json изначально. Вы можете реализовать свой собственный метод для переключения между языками - будь то через поле выбора, URL-маршрут или какой-либо другой метод, где бы вы ни находились, просто вызовите use(lang: string) метод у TranslateService для установки текущего языка.

// ...
user: { firstName: string, lastName: string };
welcome: string;
usernameLabel: string;
passwordLabel: string;
constructor(private translate: TranslateService) { }ngOnInit() {
 // синхронныйное получение перевода. Также интерполирует параметр 'firstName' со значением 'this.user.firstName'
 this.welcome = this.translate.instant('welcomeMessage', { firstName: this.user.firstName });
 // асинхронное получение перевода.
 this.translate.get(['login.username', 'login.password'])
   .subscribe(translations => {
     this.usernameLabel = translations['login.username'];
     this.passwordLabel = translations['login.password'];
   });
}

TranslatePipe

Вы можете использовать транслируемый канал так же, как любой другой канал в Angular. Ввод в канал является ключом перевода, который вам нужен. Необязательный параметр - это объект, который определяет любые строки интерполяции, которые ожидает перевод. В приведенном ниже примере компонент имеет объект user со свойством firstName. Это соответствует интерполяции, которая ожидается по значению welcomeMessage.

{{ 'welcomeMessage' | translate:user }}

TranslateDirective

Вы также можете поместить директиву в любой элемент HTML, чтобы получить перевод. Есть несколько способов сделать это.

Вы также можете установить ключ перевода в качестве содержимого элемента.

welcomeMessage