Internationalisierung

Die Komponenten des Viewers beinhalten einige Texte (z.B. Tooltips bei Buttons), die integrationsseitig angepasst werden können. Es wird hierbei mit dem Paket ngx-translate gearbeitet. Die Gründe hierfür sind unter anderem:

• Angular I18n arbeitet nur mit einer Sprache gleichzeitig, ein Wechsel der Sprache erfordert ein erneutes Laden der gesamten Anwendung
• Angular I18n arbeitet nur mit Übersetzungen in Templates und nicht im TypeScript-Code
• ngx-translate arbeitet mit JSON
• ngx-translate arbeitet auf Laufzeit-Ebene, was Dinge wie Observables ermöglicht

info

ngx-translate ist mittlerweile in den Maintenance-Mode übergegangen, weshalb möglicherweise zu einem späteren Zeitpunkt ein Wechsel auf Seiten von jadice ansteht.

Setup von ngx-translate

Zuerst müssen die benötigten Dependencies installiert werden.

npm install @ngx-translate/core

Anschließend kann das entsprechende Modul geladen werden.

// some.module.ts
import { NgModule } from '@angular/core';
// your very important imports here
import {TranslateModule} from '@ngx-translate/core';
// jadice web toolkit
import { WebtoolkitModule } from '@levigo/ngx-webtoolkit';

// other stuff
@NgModule({
  imports: [ 
      // ...
      WebtoolkitModule.forRoot({
          i18n: {
              defaultLanguage: "en",
          }
      }),
      TranslateModule.forRoot(), // <-- ngx-translate
      // ...
  ]
})
export class SomeModule {}

Nun können die JSON-Dateien mit den Übersetzungen bereitgestellt werden. Hierzu muss eine Datei im Assets-Ordner angelegt werden.

src/assets/i18n/en.json

{
    "test": {
        "example1": "Hello World"
    }
}

Verwendung in Templates

Um nun einen übersetzten String in einem Template anzeigen zu können, wird die TranslatePipe verwendet:

<p>{{"test.example1" | translate}}</p>

Verwendung in TypeScript

Über die Klasse TranslateService können Übersetzungen im Code abgerufen werden.

Die erste Methode erfolgt über

get(key: string|Array<string>, interpolateParams?: Object)`

Diese Methode ist asychron und arbeitet mit einem Observable.

Die zweite Methode ist

instant(key: string|Array<string>, interpolateParams?: Object)`

Diese Variante ist synchron. Achtung: sofern die Überstzungen noch nicht geladen wurden, wird beim Aufruf von instant nichts zurück geliefert!

Überschreiben der Viewer Texte

Die einzelnen Module des Viewers arbeiten mit unterschiedlichen Übersetzungs-Dateien. Im Viewer werden, je nach eingesetzten Komponenten, die folgenden Dateien benötigt:

• src/assets/i18n/de.json
• src/assets/ngx-webtoolkit/i18n/de.json
• src/assets/webtoolkit-client/i18n/de.json
• src/assets/jadice-common-components/i18n/de.json

Die ursprünglich enthaltenen Texte können Sie dem node_modules-Ordner entnehmen.