Seite 3: Dynamische Übersetzungen mit Angular Pipes

Inhaltsverzeichnis

Angular bietet über die Pipes i18nPlural und i18nSelect die gleichen Funktionen wie im ersten Teil unter "Dynamische Übersetzungen" gezeigt. Die Syntax bleibt identisch. Um sie mit ngx-translate zu verbinden, ist zuerst die Komponente zu erweitern, um den Pipes die benötigte Syntax übergeben zu können.

Der TranslateService, der im letzten Abschnitt zum Einrichten von Sprachen zum Einsatz kam, kann auch Übersetzungen laden. So lässt sich der definierte JSON-Bereich BOOKINGS über die Methode get laden und dem Attribut bookingTranslation anhängen (Pfeile im Listing weisen lediglich auf formatbedingte Zeilenumbrüche hin):

@Component({
    templateUrl: './booking-details.component.html'
})
export class BookingDetailsComponent implements OnInit {
    bookingTranslation;

    constructor(private translate: TranslateService) {
    }

    ngOnInit() {
        this.translate.get('BOOKING2195155S').subscribe(res => ↲
        this.bookingTranslation = res);
    }
}

Beide Pipes nutzen die gleiche Syntax wie im Abschnitt "Dynamische Übersetzungen", somit lässt sich die Datei de.json wie folgt erweitern:

{
    "BOOKINGS": {
        "passengerPlural": {
            "=1": "Passagier",
            "other": "Passagiere"
        },
        "childrenPlural": {
            "=0": "Keine Kinder",
            "=1": "Ein Kind",
            "=2": "Zwei Kinder",
            "other": "Mehr als zwei Kinder"
        },
        "returnFlightSelect": {
            "yes": "Ja",
            "no": "Nein"
        },
        "dateFormat": "d.M.y"
    }
}

i18nPlural und i18nSelect nutzen nun die vorbereiteten Daten zur Übersetzung der Tabelle, indem sie diese den Pipes anhängen. Dabei kommt das zuvor in der Komponente befüllte Attribut bookingTranslation zum Einsatz. Damit ist außerdem die Übergabe eines Formatstrings an die Pipe date möglich:

<table class="table table-striped">
    <tbody *ngIf="bookingTranslation">
    <tr *ngFor="let booking of bookings">
        <td>{{booking.from}}</td>
        <td>{{booking.to}}</td>
        <td>{{'BOOKINGS.passengers' | translate:booking}} {{ booking.passengers↲
         | i18nPlural:bookingTranslation.passengerPlural }}</td>
        <td>{{booking.children | ↲
         i18nPlural:bookingTranslation.childrenPlural}}</td>
        <td>{{booking.returnFlight |↲
         i18nSelect:bookingTranslation.returnFlightSelect}}</td>
        <td>{{booking.date | date:bookingTranslation.dateFormat}}</td>
    </tr>
    </tbody>
</table>

Sprachwechsel mit TranslateService

Die erste Sprache beziehungsweise Region wurde erfolgreich in eine JSON-Datei ausgelagert und dazu genutzt, eine Tabelle mit Flugdaten zu übersetzen. Es existiert mit der Datei en.json jedoch eine weitere Übersetzung. Um von der Standardsprache Deutsch auf Englisch zu wechseln, erhält das Template zwei Buttons:

<button (click)="selectLang('de')">DE</button>
<button (click)="selectLang('en')">EN</button>
<table>
[...]
</table>
 

Sie rufen bei Betätigung die Methode selectLang, die lediglich eine Anforderung der Methode use des TranslateService enthält, in der Komponente auf. Die Übergabe der gewünschten Sprach-ID reicht aus, um die Sprache umzustellen.

Die Übersetzungen im Tabellenkopf würden jetzt korrekt angezeigt. Anders sieht es dort aus, wo das Attribut bookingTranslation genutzt wird, da es vom Wechsel nichts mitbekommen hat. Dagegen kann jedoch der Event Emitter onLangChange helfen, der TranslateService bereitstellt. Über das Observable erhält der Entwickler die Option, weitere Schritte durchzuführen, sobald die Sprache wechselt. So lässt sich etwa bookingTranslation erneuern:

@Component({
    templateUrl: './booking-details.component.html'
})
export class BookingDetailsComponent implements OnInit {
[...]
    selectLang(lang) {
        this.translate.use(lang);
    }

    ngOnInit() {
        this.translate.get('BOOKINGS').subscribe(res => ↲
        this.bookingTranslation = res);

        this.translate.onLangChange.subscribe((event: LangChangeEvent) => {
            this.translate.get('BOOKINGS').subscribe(res => ↲
            this.bookingTranslation = res);
        });
    }
}