@ngx-translate to biblioteka, która pozwala dodawać tłumaczenia w Angularze. Dzięki tej bibliotece możemy przetłumaczyć naszą aplikację na kilka języków i łatwo przełączać się między tymi językami.

Biblioteka udostępnia serwisy, dyrektywy i potoki (pipe) dedykowane pracy z tłumaczeniami.

Instalacja

Pierwszym krokiem, który musimy wykonać to instalacja biblioteki za pomocą komendy npm install:

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

Dodanie biblioteki

Następnie należy dodać TranslateModule do głównego modułu naszej aplikacji:

import {TranslateModule,TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import { HttpClient, HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    TranslateModule.forRoot({
      defaultLanguage: 'pl',
      loader: {
          provide: TranslateLoader,
          useFactory: (http: HttpClient) => new TranslateHttpLoader(http),
          deps: [HttpClient]
      }
    })
  ]
})
export class AppModule {}

Parametr defaultLanguage pozwala ustawić domyślny język, który zostanie użyty gdy aplikacja zostanie załadowana.

Pliki z tłumaczeniami

Następnie dodajemy pliki z tłumaczeniami do katalogu assets/i18n o nazwie {lang}.json, gdzie {lang} to język pliku używanego do tłumaczeń. W przypadku języka angielskiego tym plikiem będzie plik en.json:

{
    "categories": "Categories",
    "add": "Add",
    "edit": "Edit"
}

a w przypadku języka polskiego plik będzie miał nazwę pl.json:

{
    "categories": "Kategorie",
    "add": "Dodaj",
    "edit": "Edytuj"
}

Pliki z tłumaczeniami są w formacie JSON i składają się z par klucz-wartość, w którym klucz opisuje tekst, który ma zostać przetłumaczony, a wartość jest jego tłumaczeniem, czyli rzeczywistym tekstem, który zostanie wyświetlony.

Wartość może być także innym obiektem, który pozwala grupować tłumaczenia w dowolny sposób..

{
    "tests: {
        "categories": "Kategorie",
        "add": "Dodaj",
        "edit": "Edytuj"
    }
}

W tekście wartość możesz również użyć podwójnych nawiasów klamrowych wokół nazwy zmiennej, co pozwoli dynamicznie interpolować ciągi znaków w tłumaczeniach.

{
    "greetings": "Witam {{user}}!"
}

Przełączanie języka

Aby przełączać się między językami wywołujemy metodę use:

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

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  constructor(
    private translate: TranslateService
  ) {
    translate.setDefaultLang('pl');
  }

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

Podsumowanie

  • @ngx-translate to biblioteka do Angular umożliwiająca przetłumaczenie aplikacji na kilka języków
  • @ngx-translate udostępnia serwisy, dyrektywy i potoki (pipe)
  • aby dodać @ngx-translate do naszej aplikacji należy dodać TranslateModule do głównego modułu aplikacji
  • tłumaczenia powinny znaleźć się w katalogu assets/i18n w plikach {lang}.json w formacie JSON
  • parametr defaultLanguage pozwala ustawić domyślny język
  • metoda translateService.use pozwala przełączać się między językami
Categories: angular

0 Comments

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *