In einer digitalen Landschaft, in der unterschiedliche Benutzergruppen und eine globale Reichweite von größter Bedeutung sind, ist die Lokalisierung von Inhalten für verschiedene Sprachen eine wichtige Aufgabe. Eine effiziente Lösung für diese Aufgabe liegt in der Nachrichtenformatierung in JavaScript, insbesondere im Kontext von Angular-Anwendungen. Die zwei Bibliotheken @messageformat und ngx-translate-messageformat-compiler spielen eine zentrale Rolle bei der Verbesserung der Internationalisierung (i18n). Durch die Bereitstellung lokalisierter Inhalte, die die grammatikalischen und strukturellen Besonderheiten der verschiedenen Sprachen berücksichtigen, verbessern diese Bibliotheken die Benutzererfahrung erheblich.
Das Konzept von @messageformat und ngx-translate-messageformat-compiler
@messageformat ist eine eigenständige Bibliothek für die Formatierung von Nachrichten in JavaScript. Sie bietet eine umfassende Implementierung der MessageFormatMessageFormat-Syntax und unterstützt eine breite Palette von Sprachfunktionen und Anpassungsoptionen. Sie kann unabhängig oder in Verbindung mit ngx-translate-messageformat-compiler , um die Nachrichtenformatierung in Angular-Anwendungen zu handhaben
Die ngx-translate-messageformat-compiler -Bibliothek ist eine Erweiterung von ngx-translate und ermöglicht die Formatierung von Nachrichten mit der MessageFormat-Syntax. Die Formatierung von Nachrichten ist für den Umgang mit sprachspezifischer Pluralisierung, Gendern und anderen komplexen Sprachmustern unerlässlich. Sie kompiliert die MessageFormatMessageFormat-Strings in JavaScript-Funktionen, die eine effiziente Übersetzung und Darstellung dynamischer Inhalte ermöglichen.
Reale Anwendungen von @messageformat und ngx-translate-messageformat-compiler
Beide Bibliotheken sind in Angular-Anwendungen wichtig, weil sie die Übersetzung und Formatierung von für den Benutzer sichtbarem Text ermöglichen und dabei die grammatikalischen und strukturellen Nuancen verschiedener Sprachen berücksichtigen. Dies verbessert die Benutzererfahrung durch lokalisierte Inhalte, die sich für Benutzer unterschiedlicher Regionen oder Sprachen natürlich und angemessen anfühlen.
Die Pluralisierung unterschiedlicher Sprachen
Einer der Anwendungsfälle dieser Bibliothek ist der Umgang mit den Pluralisierungen unterschiedlicher Sprachen. Die Pluralisierungsregeln können von Sprache zu Sprache sehr unterschiedlich sein, was ein komplexes Problem bei der Übersetzung und Formatierung von für den Benutzer sichtbarem Text darstellt. Im Englischen ist es zum Beispiel ganz einfach. Man fügt dem Wortende im Plural meist einfach ein „s“ hinzu. In vielen anderen Sprachen, wie auch im Deutschen, sind die Regeln jedoch komplizierter und es werden je nach Anzahl der Artikel unterschiedliche Formen verwendet.
Nehmen wir als Beispiel, wie die Anzahl gefundener Suchergebnisse auf Englisch, Russisch und Deutsch dargestellt werden könnte:
- Englisch:
Found no result. Found one result. Found # results. - Russisch:
Результатов не найдено. Нашел один результат. Найдено 3 результата (In between plural form, and it is not easy to solve). Найдено # результатов. - Deutsch:
Keine Ergebnisse gefunden. Ein Ergebnis gefunden. Es wurden # Ergebnisse gefunden.
Im Russischen veranschaulicht die Zwischenform für drei Ergebnisse die Komplexität des Plurals, der sich so direkt nicht ins Englische übersetzen lässt. Im Deutschen lässt sich der Plural auch nicht mit einem einfachen „s“ bilden.
Die Bibliotheken @messageformat@messageformat und ngx-translate-messageformat-compilerngx-translate-messageformat-compiler wurden entwickelt, um diese Art von sprachlicher Komplexität zu bewältigen und zu gewährleisten, dass Ihre Anwendung in jeder Sprache effektiv und auf natürliche Weise mit Ihren Benutzern kommuniziert.
Installation
Nachdem wir nun die Bedeutung von @messageformat und ngx-translate-messageformat-compiler erklärt haben, setzen wir dies in die Praxis um. Dieser Abschnitt enthält eine Schritt-für-Schritt-Anleitung zum Einrichten und Installieren von ngx-translatengx-translate in Ihrer Angular-Anwendung. Beginnen wir mit der Installation.
Lassen Sie uns zunächst ngx-translate einrichten:
npm install @ngx-translate/core @ngx-translate/http-loader --save
Adding library to root module app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { TranslateCompiler, TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { TranslateMessageFormatCompiler } from 'ngx-translate-messageformat-compiler';
import { AppComponent } from './app.component';
export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient],
},
})
],
bootstrap: [AppComponent],
})
export class AppModule {
}
Richten Sie dann eine einfache Anwendung mit Übersetzung ein:
app.component.html:
<ul>
<li *ngFor="let lang of languages">
<a (click)="changeLangTo(lang)">
{{ lang }}
</a>
</li>
</ul>
<section>
<p>
{{ "GREETING" | translate }}
</p>
</section>
app.component.ts:
import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
languages = ['en', 'ru', 'de'];
constructor(private readonly translateService: TranslateService) {
translateService.setDefaultLang('en');
translateService.use('en');
}
changeLangTo(lang: string): void {
this.translateService.use(lang);
}
}
en.json:
{
"GREETING": "Hello!"
}
ru.json:
{
"GREETING": "Привет!"
}
de.json:
{
"GREETING": "Hallo!"
}
Und das Ergebnis sieht dann so aus:
Nun fügen wir @messageformat und ngx-translate-messageformat-compiler hinzu:
npm install @messageformat/core ngx-translate-messageformat-compiler --save
Nach der Installation muss TranslateModule für die Verwendung von TranslateMessageFormatCompiler konfiguriert werden:
import { TranslateCompiler } from '@ngx-translate/core';
import { TranslateMessageFormatCompiler } from 'ngx-translate-messageformat-compiler';
....
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient],
},
compiler: {
provide: TranslateCompiler,
useClass: TranslateMessageFormatCompiler,
},
})
],
bootstrap: [AppComponent],
})
export class AppModule {
}
Es ist auch möglich, MessageFormatMessageFormat zu konfigurieren, indem Sie ein Konfigurationsobjekt für das Injection-Token MESSAGE_FORMAT_CONFIGMESSAGE_FORMAT_CONFIG bereitstellen. Hier ist die Standardeinstellung:
{
biDiSupport: false,
formatters: {},
strictNumberSign: false,
currency: "USD"
}
MessageFormat -Instanzen bieten verschiedene Optionen zur Steuerung des Verhaltens. Zu diesen Optionen gehören customFormatters, biDiSupport und strict mode, die eine Anpassung und Einflussnahme auf die Funktionsweise von MessageFormat ermöglichen. Mehr dazu erfahren Sie in der offiziellen Dokumentation.
Nutzung
Nachdem wir ngx-translate konfiguriert haben, können wir nun unser erstes Problem angehen: das Einbinden der Übersetzungen in unsere .json-Dateien im richtigen Format. Wenn Sie MessageFormat in Verbindung mit ngx-translate verwenden, ist es wichtig, einige wichtige Unterschiede zur Standardsyntax von ngx-translate zu beachten:
- Der Zugriff auf Objekteigenschaften in Platzhaltern wird nicht unterstützt. Zum Beispiel funktioniert eine Syntax wie
Hello {name.prop} {name.prop2}Hallo nicht. - Einfache Platzhalter werden in einfache geschweifte Klammern eingeschlossen, statt in doppelte. Wir müssen also
Hello {name}anstelle des StandardwertesHello {{name}}verwenden.
Schauen wir uns die Grundstruktur eines Formatierers an, um diese Konzepte besser zu verstehen:
{variable, formatter, option {#(variable placeholder) interpolated text}}
Hier die Übersetzungsstrings:
en.json
{
"RESULT_TEXT": "{count, plural, =0{Found no results} one{Found one result} other{Found # results} }"
}
de.json
{
"RESULT_TEXT": "{count, plural, =0{Keine Ergebnisse gefunden} one{Ein Ergebnis gefunden} other{Es wurden # Ergebnisse gefunden} }"
}
ru.json
{
"RESULT_TEXT": "{count, plural, =0{Результатов не найдено} one{Нашел один результат} few{Найдено # результата} other{Найдено # результатов} }"
}
Ändern wir den Code nun, um das Ergebnis zu sehen:
app.component.html:
....
<p>
{{ "RESULT_TEXT" | translate : { count: resultCount } }}
</p>
<button (click)="decrement()">
-
</button>
|
<button (click)="increment()">
+
</button>
....
app.component.ts:
....
resultCount = 0;
....
increment(): void {
this.resultCount++;
}
decrement(): void {
this.resultCount--;
}
....
Schließlich erhalten wir:
Mehr Funktionalität mit zusätzlichen Formatierern
Das ist längst nicht alles. Die Vielseitigkeit von MessageFormatMessageFormat geht über eine so grundsätzliche Verwendung hinaus und bietet eine Reihe von ready-to-use formatters bereits verwendbaren Formatierern, die eine Vielzahl von Szenarien abdecken und die Anpassungsfähigkeit und Funktionalität verbessern. Die Möglichkeiten umfassen:
- Auswahl
- Plural (wie in unserem Beispiel)
- Datum
- Dauer
- Zahlen
- Zeiten
MessageFormatDie Flexibilität von MessageFormat ermöglicht darüber hinaus, benutzerdefinierte Formatierer für einzigartige oder außergewöhnliche Fälle zu erstellen, die auftreten können. Die Möglichkeit, die Bibliothek an die speziellen Bedürfnisse anzupassen, unterstreicht die Stärke und den Nutzen von MessageFormat in der Welt der Internationalisierung.
Fazit
Zusammenfassend lässt sich sagen, dass @messageformat die Aufgabe der Erstellung dynamischer und lokalisierter Nachrichten vereinfacht, indem es Platzhalter und die Ersetzung von Variablen erlaubt. Es macht die manuelle Verkettung von Strings überflüssig und bietet Unterstützung für sprachspezifische Regeln und Variationen, was die Erstellung mehrsprachiger Anwendungen erleichtert.
