Internationalisierung (i18n) ist ein wesentlicher Aspekt der modernen Webentwicklung und ermöglicht es Anwendungen, ein globales Publikum zu erreichen, indem sie mehrere Sprachen und Gebietsschemas unterstützen. Angular, ein beliebtes JavaScript-Framework, bietet robuste Tools und Bibliotheken, um die i18n-Implementierung zu erleichtern. In diesem Artikel werden wir untersuchen, wie ich i18n in Angular mithilfe der ngx-translate-Bibliothek einrichte, einer vielseitigen Lösung, die den Prozess der Übersetzung und Lokalisierung von Angular-Anwendungen vereinfacht.

Schritt 1: Installieren Sie ngx-translate

Um zu beginnen, müssen wir die ngx-translate-Bibliothek installieren. Öffnen Sie ein Terminalfenster und navigieren Sie zu Ihrem Angular-Projektverzeichnis. Führen Sie den folgenden Befehl aus:

npm install @ngx-translate/core @ngx-translate/http-loader --save

Dieser Befehl installiert sowohl die Kernbibliothek ngx-translate als auch den http-loader, der zum Laden von Übersetzungsdateien erforderlich ist.

Schritt 2: Konfigurieren Sie ngx-translate

Als nächstes müssen wir ngx-translate in unserem Angular-Projekt konfigurieren. Im app.module.ts Datei, importieren Sie die erforderlichen Module und konfigurieren Sie den Übersetzungslader. Fügen Sie den folgenden Code zum Abschnitt „Importe“ hinzu:

import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient, HttpClientModule } from '@angular/common/http'; export function HttpLoaderFactory(http: HttpClient) { return new TranslateHttpLoader(http);
} @NgModule({ imports: [ HttpClientModule, TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: HttpLoaderFactory, deps: [HttpClient] } }) ], })
export class AppModule { }

Im obigen Code importieren wir die notwendigen Module aus ngx-translate und HttpClientModule aus @angular/common/http. Wir definieren auch die HttpLoaderFactory Funktion, die zum Laden von Übersetzungsdateien über den http-Loader verwendet wird.

Schritt 3: Übersetzungsdateien erstellen

Erstellen wir nun die Übersetzungsdateien für die unterstützten Sprachen. Im Inneren src/assets/i18n Erstellen Sie im Verzeichnis eine separate JSON-Datei für jede Sprache, die Sie unterstützen möchten. Erstellen Sie zum Beispiel en.json für Englisch, es.json für Spanisch und so weiter. Diese Dateien sollten Schlüssel-Wert-Paare enthalten, wobei die Schlüssel die Übersetzungsschlüssel darstellen und die Werte den übersetzten Text enthalten. Hier ein Beispiel für den Aufbau:

{ "welcome": "Welcome to my app!", "greeting": "Hello, {name}!"
}

{ "welcome": "¡Bienvenido a mi aplicación!", "greeting": "¡Hola, {name}!"
}

Schritt 4: Implementieren Sie die Übersetzung in der Anwendung

Nachdem wir nun ngx-translate eingerichtet und die Übersetzungsdateien erstellt haben, können wir mit der Verwendung von Übersetzungen in unseren Angular-Komponenten beginnen. Nehmen wir an, wir haben eine Komponente namens AppComponent. In dem app.component.ts Datei importieren Sie die erforderlichen ngx-translate-Module:

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core'; @Component({ selector: 'app-root', template: ` <h1>{{ 'welcome' | translate }}</h1> <p>{{ 'greeting' | translate: { name: 'John' } }}</p> `
})
export class AppComponent { constructor(private translate: TranslateService) { translate.setDefaultLang('en'); }
}

Im obigen Code importieren wir die TranslateService von ngx-translate und injizieren Sie es in das AppComponent. Durch die Verwendung der translate Rohr, wir können leicht

Übersetzen Sie den gewünschten Text durch Übergabe des Übersetzungsschlüssels. Wir können auch dynamische Werte mit übergeben translate Das zweite Argument von Pipe.

Schritt 5: Sprache wechseln

Abschließend implementieren wir einen Sprachumschalter, damit Benutzer zwischen verschiedenen Sprachoptionen wechseln können. Erstellen Sie eine Sprachumschalterkomponente (z. B. LanguageSwitcherComponent) und fügen Sie den folgenden Code hinzu:

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core'; @Component({ selector: 'app-language-switcher', template: ` <select (change)="switchLanguage($event.target.value)"> <option value="en">English</option> <option value="es">Español</option> </select> `
})
export class LanguageSwitcherComponent { constructor(private translate: TranslateService) { } switchLanguage(language: string) { this.translate.use(language); }
}

Im obigen Code importieren wir die TranslateService und injizieren Sie es in die LanguageSwitcherComponentdem „Vermischten Geschmack“. Seine switchLanguage Methode ist an die gebunden change Ereignis eines <select> Element, mit dem Benutzer eine Sprache auswählen können. Bei der Sprachauswahl wird die switchLanguage Die Methode legt die ausgewählte Sprache mithilfe der fest translate.use() Funktion.

In diesem Artikel haben wir untersucht, wie man i18n in Angular mithilfe der ngx-translate-Bibliothek einrichtet. Wenn Sie diese Schritte befolgen, können Sie ganz einfach Sprachübersetzung und Lokalisierung zu Ihren Angular-Anwendungen hinzufügen. ngx-translate bietet einen umfassenden und unkomplizierten Ansatz für den Umgang mit i18n und ermöglicht es Ihnen, ein breiteres globales Publikum zu erreichen. Beginnen Sie also mit der Übersetzung Ihrer Anwendung und machen Sie sie Benutzern weltweit zugänglich!

• SEO-gestützte Content- und PR-Distribution. Holen Sie sich noch heute Verstärkung.
• PlatoData.Network Vertikale generative KI. Motiviere dich selbst. Hier zugreifen.
• PlatoAiStream. Web3-Intelligenz. Wissen verstärkt. Hier zugreifen.
• PlatoESG. Automobil / Elektrofahrzeuge, Kohlenstoff, CleanTech, Energie, Umwelt, Solar, Abfallwirtschaft. Hier zugreifen.
• BlockOffsets. Modernisierung des Eigentums an Umweltkompensationen. Hier zugreifen.
• Quelle: https://www.codementor.io/anwarulislam/how-i-set-up-i18n-in-angular-with-ngx-translate-26d3bsf6un