Verbesserte Internationalisierung (i18n) mit @messageformat und ngx-translate-messageformat-compiler in Angular-Anwendungen

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:

Das Ergebnis zeigt einen Cursor, der zwischen den Sprachen wechselt

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:

  1. Der Zugriff auf Objekteigenschaften in Platzhaltern wird nicht unterst√ľtzt. Zum Beispiel funktioniert eine Syntax wie Hello {name.prop} {name.prop2}Hallo nicht.
  2. Einfache Platzhalter werden in einfache geschweifte Klammern eingeschlossen, statt in doppelte. Wir m√ľssen also Hello {name} anstelle des Standardwertes Hello {{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:

Das fertige Ergebnis zeigt einen Cursor, der zwischen den Sprachen und der Anzahl der Ergebnisse wechselt

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.

Melden Sie sich an, um die neuesten Updates, Nachrichten und Funktionen zu erhalten.

Wir respektieren Ihren Posteingang und bem√ľhen uns, Spam zu vermeiden