Internationalisierung für Angular, Teil 2: ngx-translate

Inhaltsverzeichnis

Im ersten Teil wurde gezeigt, wie Angular die Internationalisierung mit allen Vor- und Nachteilen angeht. Als Alternative dazu hat sich ngx-translate heraus kristallisiert. Obwohl das Ziel dasselbe ist, unterscheidet sich der Ansatz der Bibliothek deutlich von der Angular-Implementierung. Mit ngx-translate werden Übersetzungen zur Laufzeit durchgeführt. Dafür liefert die Bibliothek eine Direktive, eine Pipe und ein Service mit. Durch den flexibleren Aufbau ist es möglich, Übersetzungen auszuwechseln, ohne die Applikation neu starten zu müssen. Als Format kommt JSON zum Einsatz und auch externe Datenquellen lassen sich verwenden.

Einrichtung der Library

Bevor sie mit der Übersetzung starten können, müssen Entwickler die Bibliothek im Projekt installieren und integrieren:

npm install @ngx-translate/core --save
 

Im AppModule beziehungsweise dem Root-Modul der Applikation ist das TranslateModule über den Bereich imports einzurichten. Die Methode forRoot kann noch erweiterte Konfigurationen, wie die Datenquelle, enthalten:

import { TranslateModule } from '@ngx-translate/core';

@NgModule({
    imports: [
        TranslateModule.forRoot()
    ] ,
    bootstrap: [
        AppComponent
    ]
})
export class AppModule {
} 

Damit Direktiven und Pipes, die von ngx-translate kommen, im Template einer Komponente verfügbar sind, ist das TranslateModule in die Feature-Module zu importieren, welche die Internationalisierung nutzen möchten. Damit Entwickler diese Aufgabe nicht ständig wiederholen müssen, kann man sie in ein SharedModule exportieren, sofern vorhanden. Damit steht allen Modulen, die das SharedModule importieren, ebenfalls das TranslateModule zur Verfügung:

import { TranslateModule } from '@ngx-translate/core';

@NgModule({
    exports: [
        TranslateModule
    ] 
})
export class SharedModule {
}

Um die Spracheinstellungen festzulegen, müssen Entwickler den Service TranslateService per Dependency Injection in die AppComponent holen, beziehungsweise in die Komponente, die im Bereich bootstrap des Root-Moduls angegeben ist.

Dafür sind drei Parameter einzustellen:

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

@Component({
    selector: 'flight-app',
    templateUrl: './app.component.html'
})
export class AppComponent {
    constructor(private translate: TranslateService) {

        translate.setDefaultLang('de');
        translate.use('de');
        translate.addLangs(['en']);

    }
}

Wie der Name der Methode setDefaultLang erahnen lässt, bestimmt sie die Standardsprache. Entwickler sollten eine auswählen, für die eine vollständige Übersetzung existiert. Sollte in der über die Methode use gesetzten Sprache ein Wert fehlen, sucht die Bibliothek stattdessen in der Standardsprache. Fehlt auch dort die Übersetzung, zeigt sie die definierte Referenz an.

Im Beispiel sind zwei Sprachen verfügbar. Die zweite ist über die Methode addLangs eingebunden. Die übergebenen Werte entsprechen dabei nicht tatsächlich einem regionalen Key sondern sind frei wählbar, ebenso wie die Dateinamen. Es ist jedoch sinnvoll, einen entsprechenden Key einzusetzen. Ein Loader nutzt die sich aus setDefaultLang und dem Array von addLangs zusammensetzende Sprach-ID später, um die Datenquelle zu bestimmen.