Kurs Angular Material – Cz. 6 Tłumaczenia

Cześć, w tym krótszym wpisie chciałbym zapoznać Was z pewną metodą do wdrożenia tłumaczeń, aby nasza aplikacja była wielojęzykowa. Będziemy korzystać z biblioteki:  Angular localization Biblioteka ta służy nie tylko do robienia tłumaczeń ale także do lokalizowaniu numerów i dat aplikacji, dodawaniu kodu języka, kodu kraju, kodu waluty, strefy czasowej i wszelkich innych spraw związanych z lokalizacjami.

Zabieramy się do pracy. 

Aktualna wersja jest pod adresem: https://github.com/taaaniel/foodCalc/tree/part_5_component_modules_end .

Dodawanie serwisu do tłumaczeń najlepiej robić w początkowej fazie developingu, gdyż będziemy musieli praktycznie w każdym komponencie dodawać dekoratory do naszego serwisy tłumaczeń. Zatem im wcześniej zaczniemy tym mniej problemów będziemy mieli potem.

Po pierwsze musimy zainstalować bibliotekę w aplikacji. Będąc w katalogu głównym naszego programu,  w konsoli wpisujemy:

npm install angular-l10n --save

Teraz zaimportujemy bibliotekę do aplikacji.  W pliku shared.module.ts musimy umieścić trochę kodu. Robimy to w naszym „shared module” gdyż tłumaczenia będą używane praktycznie w każdym komponencie, tak samo jak  moduły z „Material Design” Na początek importujemy poszczególne moduły.

import { HttpClientModule } from '@angular/common/http';
import { L10nConfig, L10nLoader, LocalizationModule, StorageStrategy, ProviderType, LogLevel } from 'angular-l10n';

Teraz dodajemy konfigurację:

const l10nConfig: L10nConfig = {
  locale: {
      languages: [
          { code: 'pl', dir: 'ltr' },
          { code: 'en', dir: 'ltr' }
      ],
      language: 'pl',
      storage: StorageStrategy.Cookie
  },
  translation: {
      providers: [
          { type: ProviderType.Static, prefix: './assets/locale/' }
      ],
      caching: true,
      composedKeySeparator: '.',
  }
};

Zatrzymajmy się na chwilę by omówić tę konfigurację:

• w obiekcje locale mamy tablicę obiektów, w których znajduje się kod/skrót języków jakich będziemy używać i tajemnicze „dir”. Jest to skrót od „direction” a w tym konkretnym przykładzie chodzi o kierunek czytania. „ltr” to „left to right”
• language-  domyślny język
• storage – W przypadku pominięcia daty ważności pliku cookie plik cookie staje się plikiem cookie sesji. Czyli ustawiamy, że nasz język będzie przetrzymywany w Ciasteczkach
• w obiekcie „translation” propercja „providers” odpowiada za ładowanie asynchroniczne: wyłącza / włącza pamięć podręczną dla dostawców tłumaczeń i tutaj podajemy ścieżkę do naszego słownika w formacie JSON (tutaj jest prefix, zatem będziemy tworzyć pliki pl.json i en.json zgodnie z kodem językowym który jest wyżej  w tabeli languages) o czym w dalszej części
• „catching” to ładowanie asynchroniczne: dodaje parametr zapytania „ver” do żądań http.
• „composedKeySeparator” tutaj podajemy jakim znakiem będziemy łączyć klucze tłumaczeń. Wyjaśni się to poniżej gdy będziemy pisać słownik.

Teraz musimy dodać nasz moduł translacyjny do tablicy importów:

HttpClientModule,
LocalizationModule.forRoot(l10nConfig)

i eksportów:

HttpClientModule,
LocalizationModule

Następnie, kreujemy konstruktor w shared.module.ts i wstrzykujemy tam loader od modułu tłumaczeń.

export class SharedModule {
  constructor(public l10nLoader: L10nLoader) {
    this.l10nLoader.load();
  }
 }

Cały shared.module.ts wygląda tak:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
  MatButtonModule,
  MatCardModule,
  MatMenuModule,
  MatToolbarModule,
  MatIconModule,
  MatListModule,
  MatChipsModule,
  MatTableModule,
  MatTabsModule } from '@angular/material';
import { FlexLayoutModule } from '@angular/flex-layout';
import { HttpClientModule } from '@angular/common/http';
import { L10nConfig, L10nLoader, LocalizationModule, StorageStrategy, ProviderType, LogLevel } from 'angular-l10n';

const l10nConfig: L10nConfig = {
  locale: {
      languages: [
          { code: 'pl', dir: 'ltr' },
          { code: 'en', dir: 'ltr' }
      ],
      language: 'pl',
      storage: StorageStrategy.Cookie
  },
  translation: {
      providers: [
          { type: ProviderType.Static, prefix: './assets/locale/' }
      ],
      caching: true,
      composedKeySeparator: '.',
  }
};

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    MatButtonModule,
    MatCardModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatListModule,
    MatChipsModule,
    MatTableModule,
    MatTabsModule,
    FlexLayoutModule,
    HttpClientModule,
    LocalizationModule.forRoot(l10nConfig)
  ],
  exports: [
    MatButtonModule,
    MatCardModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatListModule,
    MatChipsModule,
    MatTableModule,
    MatTabsModule,
    FlexLayoutModule,
    HttpClientModule,
    LocalizationModule
  ]
})
export class SharedModule {
  constructor(public l10nLoader: L10nLoader) {
    this.l10nLoader.load();
  }
 }

Po edycji shared.module.ts do katalogu „assets” dodajemy katalog/folder „locale”.  Może być inny, ale pamiętajmy by był zgodny ze ścieżką w konfiguracji w shared.module.ts . Chodzi o tę linijkę:

{ type: ProviderType.Static, prefix: './assets/locale/' }
  ],

Teraz w folderze „locale” tworzymy dwa pliki .json:

• pl.json – słownik kluczy i tłumaczeń na język polski
• en.json – słownik kluczy i tłumaczeń na język angielski

Kiedy mamy już to zrobione przechodzimy do header.component.html i dodajemy w widoku trochę kodu, który utworzy menu zmiany języka. Całość kodu headera wygląda tak:

<header fxLayout='row'>
  <mat-toolbar color="primary">
    <div class="app-logo">
      <h1>FoodCalc</h1>
    </div>
    <div fxFlex></div>
    <!-- Languages switch menu -->
    <div>
      <button mat-button [matMenuTriggerFor]="languageMenu">
        <mat-icon>language</mat-icon>
        <mat-icon>arrow_drop_down</mat-icon>
      </button>
      <mat-menu  #languageMenu overlapTrigger="false">
        <button (click)="selectLanguage('pl')" mat-menu-item>
          {{ 'HEADER.LANGUAGE_POLISH'}}
        </button>
        <button (click)="selectLanguage('en')" mat-menu-item>
          {{ 'HEADER.LANGUAGE_ENGLISH' }}
      </button>
      </mat-menu>
    </div>
     <!-- END Languages switch menu -->
    <div>
      <button mat-icon-button [matMenuTriggerFor]="menu">
        <mat-icon>person</mat-icon>
        <mat-icon>arrow_drop_down</mat-icon>
      </button>
      <mat-menu #menu="matMenu">
        <button mat-menu-item>
          <mat-icon>fingerprint</mat-icon>
          <span>Login</span>
        </button>
        <button mat-menu-item disabled>
          <mat-icon>close</mat-icon>
          <span>Logout</span>
        </button>
        <button mat-menu-item>
          <mat-icon>content_paste</mat-icon>
          <span>Registration</span>
        </button>
      </mat-menu>
    </div>
    <div fxFlex='20px'></div>
  </mat-toolbar>
</header>

Dodana cześć kodu jest jest oznaczona komentarzem.

Zwróćmy teraz uwagę na dziwne zapisy :

{
  "HEADER": {
    "LANGUAGE_POLISH": "Język Polski",
    "LANGUAGE_ENGLISH": "Język Angielski"
  }
}

{
  "HEADER": {
    "LANGUAGE_POLISH": "Polish",
    "LANGUAGE_ENGLISH": "English"
  }
}

import { LocaleService, TranslationService, Language } from 'angular-l10n';

public selectedLanguage: string;

@Language() lang: string;

constructor(
    public locale: LocaleService,
    public translation: TranslationService
  ) { }

this.selectedLanguage = this.locale.getCurrentLanguage();

<button (click)="selectLanguage('en')" mat-menu-item>

selectLanguage(language: string): void {
    this.locale.setCurrentLanguage(language);
    this.selectedLanguage = language;
  }

<button (click)="selectLanguage('en')" mat-menu-item>
 {{ 'HEADER.LANGUAGE_POLISH' | translate: lang}}
</button>
<button (click)="selectLanguage('pl')" mat-menu-item>
 {{ 'HEADER.LANGUAGE_ENGLISH' | translate: lang}}
</button>

<header fxLayout='row'>
  <mat-toolbar color="primary">
    <div class="app-logo">
      <h1>FoodCalc</h1>
    </div>
    <div fxFlex></div>
    <!-- Languages switch menu -->
    <div>
      <button mat-button [matMenuTriggerFor]="languageMenu">
        <mat-icon>language</mat-icon>
         <span>{{ selectedLanguage }}</span>
        <mat-icon>arrow_drop_down</mat-icon>
      </button>
      <mat-menu  #languageMenu overlapTrigger="false">
        <button (click)="selectLanguage('pl')" mat-menu-item>
          {{ 'HEADER.LANGUAGE_POLISH' | translate: lang}}
        </button>
        <button (click)="selectLanguage('en')" mat-menu-item>
          {{ 'HEADER.LANGUAGE_ENGLISH' | translate: lang}}
      </button>
      </mat-menu>
    </div>
     <!-- END Languages switch menu -->
    <div>
      <button mat-icon-button [matMenuTriggerFor]="menu">
        <mat-icon>person</mat-icon>
        <mat-icon>arrow_drop_down</mat-icon>
      </button>
      <mat-menu #menu="matMenu">
        <button mat-menu-item>
          <mat-icon>fingerprint</mat-icon>
          <span>Login</span>
        </button>
        <button mat-menu-item disabled>
          <mat-icon>close</mat-icon>
          <span>Logout</span>
        </button>
        <button mat-menu-item>
          <mat-icon>content_paste</mat-icon>
          <span>Registration</span>
        </button>
      </mat-menu>
    </div>
    <div fxFlex='20px'></div>
  </mat-toolbar>
</header>

constructor(
    public locale: LocaleService,
    public translation: TranslationService
  ) { }

@Language() lang: string;