progtask.ru

Для создания мультиязычного приложения будем использовать ngx-translate. Для примера создадим новое приложение и сделаем английскую и русскую версию.

Ниже приведена необходимая последовательность действий:

— Установка @angular/cli, если у вас его ещё нет:

npm install @angular/cli -g

— Создание приложения:

ng new i18n-app

— Переход в папку с приложением:

cd i18n-app/

— Добавление необходимых библиотек:

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

— Модификация app.module.ts. Ниже приведён итоговый файл:

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { TranslateLoader, TranslateModule } from "@ngx-translate/core";
import { TranslateHttpLoader } from "@ngx-translate/http-loader";
import { HttpClient, HttpClientModule } from "@angular/common/http";

// данная функция необходима при AOT компиляции
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

— Создание файлов с переводом. Необходимо создать 2 файла для английской и русской версии. Они должны располагаться по пути src/assets/i18n/:

en.json:

{
    "info": {
        "about": "Multilanguage application"
    },
    "languages": {
        "english": "English",
        "russian": "Russian"
    }
}

ru.json:

{
    "info": {
        "about": "Мультиязычное приложение"
    },
    "languages": {
        "english": "Английский",
        "russian": "Русский"
    }
}

— Изменение шаблона app.component.html:

<h1>{{ 'info.about' | translate }}</h1>
<div>
  <button (click)="setLanguage('en')">{{ 'languages.english' | translate }}</button>
  <button (click)="setLanguage('ru')">{{ 'languages.russian' | translate }}</button>
</div>

— Модификация app.components.ts:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(
    private translateService: TranslateService
  ) {
    // устанавливаем язык по умолчанию
    this.translateService.setDefaultLang('en');
  }

  setLanguage(languageCode: string) {
    // устанавливаем выбранный язык
    this.translateService.use(languageCode);
    // для примера переводим строку вне шаблона, используя
    // для этого TranslateService
    this.translateService.get('info.about').
        pipe(first()).subscribe((value) => console.log(value));
  }
}

Англоязычная версия:

Русскоязычная версия: