Угловая интернационализация: i18n

В наши дни почти каждый веб-сайт поддерживает несколько языков.

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

Давайте начнем,

Мы будем использовать модули core и http-loader от @ngx-translate.

бегать

npm install @ngx-translate/core и

npm установить @ngx-перевод/http-загрузчик

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

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

@Injectable({
  providedIn: 'root'
})
export class I18nConfigService {

  currentLang = 'en';
  translateService: TranslateService;

  setSelectedLanguage(language) {
    this.currentLang = language;
    this.applyLanguage(this.currentLang);
  }
  private applyLanguage(language) {
    this.translateService.use(language);
  }
  getLanguages() {
    return this.translateService.getLangs();
  }
  constructor(translateService: TranslateService) {
    this.translateService = translateService;
  }

  setUpConf() {
    this.translateService.addLangs(['en', 'fr']);
    this.translateService.setDefaultLang(this.currentLang);
    this.applyLanguage(this.currentLang);
  }
}

Внутри функции setUpConf() сначала мы предоставляем массив кодов языков, затем во второй строке мы передаем текущий язык в качестве кода языка по умолчанию, а в последней строке мы применяем текущий выбранный язык.

Теперь нам нужен компонент с выпадающим меню для смены языков.

import { Component, OnInit } from '@angular/core';
import {I18nConfigService} from '../service/i18n-config.service';

@Component({
  selector: 'app-language-selector',
  template: '<select class="form-input col-md-2" style="display: block" ' +
  ' #langSelect (change)="i18nConf.setSelectedLanguage(langSelect.value)">\n' +
  '      <option *ngFor="let lang of i18nConf.getLanguages()" [value]="lang" ' +
  ' [selected]="lang === this.i18nConf.currentLang">{{ lang }}</option>\n' +
  '    </select>\n',
  styles: []
})
export class LanguageSelectorComponent implements OnInit {
  i18nConf: I18nConfigService;
  constructor( i18nConf: I18nConfigService) {
    this.i18nConf = i18nConf;
    this.i18nConf.setUpConf();
  }

  ngOnInit() {
  }

}

Я использую строку HTML для отображения раскрывающегося списка языков. При выборе мы меняем текущий язык в I18nConfigService.

Теперь нам нужно настроить провайдера в файле app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { LanguageSelectorComponent } from './language-selector/language-selector.component';
import { HomeComponent } from './home/home.component';
import {AppRoutingModule} from './app-routing.module';
import {HttpClient, HttpClientModule} from '@angular/common/http';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {TranslateLoader, TranslateModule} from '@ngx-translate/core';

npm install @ngx-translate/core
// AoT requires an exported function for factories
export function HttpLoaderFactory(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient);
}

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

Теперь вам нужно создать файлы Json для другого языка в каталоге assets. Имейте в виду, имена файлов должны быть с кодами языков, которые мы предоставили в службе конфигурации. например, en.json и fr.json.

en.json

{
    "HOME" : {
      "H1" : "Welcome to Angular internationalization!",
      "H2" : "Here are some links to help you start: ",
      "A1_LABEL" : "Tour of Heroes",
      "A2_LABEL" : "CLI Documentation",
      "A3_LABEL" : "Angular blog"
    }
}

fr.json

{
  "HOME" : {
    "H1" : "Bienvenue à l'internationalisation angulaire!",
    "H2" : "Voici quelques liens pour vous aider à démarrer:",
    "A1_LABEL" : "Tour des Héros",
    "A2_LABEL" : "Documentation CLI",
    "A3_LABEL" : "Blog angulaire"
  }
}

Теперь просто добавьте ‹app-language-selector›‹/app-language-selector›к компоненту, в котором вы хотите, чтобы язык раскрывался.

<div>
  Select Language : <app-language-selector></app-language-selector>
</div>

Ну вот. Мы сделали. Просто, не так ли? :-п

Спасибо за чтение. Вы можете скачать исходный код здесь. https://github.com/hemant231/angular-internationalization

Спасибо за чтение. Ваше здоровье !