Internationalisierung (i) in Angular

In der heutigen expansiven digitalen Welt streben Webentwickler danach, mit einem globalen Publikum in Kontakt zu treten. Eine Schlüsselstrategie, um dies zu erreichen, besteht darin, Ihre Angular-Anwendung in ein mehrsprachiges Erlebnis umzuwandeln. Willkommen bei der Internationalisierung (i18n), wo Ihre App mit Benutzern in ihrer Muttersprache kommunizieren kann, egal wo sie sich befinden. In diesem Blog befassen wir uns intensiv mit der Integration von i18n in Ihr Angular-Projekt und stellen sicher, dass Ihre App für Menschen auf der ganzen Welt zugänglich und benutzerfreundlich ist.

Einführung in die Internationalisierung (i18n) in Angular

Stellen Sie sich Ihre Web-App als Brücke vor, die Benutzer aus der ganzen Welt verbindet. Um ein einladendes und benutzerfreundliches Erlebnis für alle zu schaffen, ist es wichtig, in ihrer Sprache zu kommunizieren. Internationalisierung (i18n) ist der Schlüssel zur Anpassung Ihrer App an verschiedene Sprachen und Regionen. Angular bietet robuste Tools und Funktionen, die Ihnen dabei helfen, dies zu erreichen.

Einrichten eines neuen Angular-Projekts

Bevor wir unsere i18n-Reise beginnen, erstellen wir ein neues Angular-Projekt.

ng new i18n-app

Mit dem folgenden Befehl können Sie über die Angular-CLI ein neues Angular-Projekt starten. Während des Einrichtungsprozesses können Sie Ihr Projekt konfigurieren, einschließlich Optionen wie der Aktivierung von Angular Routing und der Auswahl eines Stylesheet-Formats (z. B. CSS, SCSS). Stellen Sie sicher, dass Sie die Einstellungen auswählen, die den Anforderungen Ihres Projekts entsprechen.

Installieren und Konfigurieren der i18n-Tools von Angular

1. Um unsere i18n-Reise in Gang zu bringen, benötigen wir die richtigen Werkzeuge. Wir installieren und richten die i18n-Tools von Angular ein, um unsere App mehrsprachig zu machen.

npm install @ngx-translate/core --save

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

1. Sobald ngx-translate installiert ist, können wir es in unser Angular-Modul oder Config importieren und den Übersetzungsdienst einrichten:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { AppComponent } from './app.component';

export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
    return new TranslateHttpLoader(http, '../assets/i18n/', '.json');
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Wenn Sie die Datei app.config verwenden, ersetzen Sie NgModule einfach durch den folgenden Code:

import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { ApplicationConfig, importProvidersFrom } from '@angular/core';

export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
    return new TranslateHttpLoader(http, '../assets/i18n/', '.json');
}

export const appConfig: ApplicationConfig = {
    providers: [
        importProvidersFrom([
            BrowserModule,
            HttpClientModule,
            TranslateModule.forRoot({
                loader: {
                    provide: TranslateLoader,
                    useFactory: HttpLoaderFactory,
                    deps: [HttpClient],
                },
            }),
        ])
    ]
}

In diesem Code importieren wir die erforderlichen ngx-translate-Module und konfigurieren den Übersetzungslader mithilfe der HttpLoaderFactory-Funktion. Die HttpLoaderFactory-Funktion verwendet das HttpClient-Modul, um Übersetzungsdateien asynchron vom Server zu laden.

Übersetzungsdateien erstellen

Sobald der Übersetzungsdienst eingerichtet ist, können wir Übersetzungsdateien für jede Sprache erstellen, die wir unterstützen möchten. Übersetzungsdateien sind JSON-Dateien, die Schlüssel übersetzten Zeichenfolgen zuordnen.

Erstellen Sie Dateien mit dem erforderlichen Sprachcode als Namen und fügen Sie ihnen Übersetzungen hinzu.

Hier ist zum Beispiel eine englische Übersetzungsdatei:

{
  "title": "My App",
  "greeting": "Hello, {{name}}!"
}

Und hier ist eine deutsche Übersetzungsdatei:

{
  "title": "Meine App",
  "greeting": "Hallo, {{name}}!"
}

Hier ist die Ordnerstruktur und die Namen der Dateien.

Hinweis: Die Übersetzungsdateien verwenden dieselben Schlüssel, jedoch mit unterschiedlichen Werten für jede Sprache. Dies vereinfacht den Wechsel zwischen den Sprachen in unserer Anwendung, ohne den Code zu ändern.

Übersetzungen in Vorlagen verwenden

Da unsere Übersetzungsdateien fertig sind, können wir sie jetzt in unsere Angular-Vorlagen integrieren. Der erste Schritt besteht darin, den Übersetzungsdienst in unsere Komponente einzubinden:

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 {

  constructor(private translate: TranslateService) {
    // Set the default language
    translate.setDefaultLang('EN');
  }

  translateLanguage(lang: string) {
    // Set the current language
    this.translate.use(lang);
  }
}

In diesem Code fügen wir den TranslateService in unsere Komponente ein und legen Englisch als Standardsprache fest. Wir definieren auch eine TranslateLanguage-Methode, die es uns ermöglicht, die Sprache der Anwendung zu ändern.

Erstellen Sie eine Komponente für die Sprachübersetzung

ng g c LanguageTranslation

Nachdem wir die Komponente erstellt haben, können wir den Übersetzungsdienst nutzen, um zwischen mehreren Sprachen zu übersetzen.

LanguageTranslation.component.ts

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

@Component({
  selector: 'app-language-translator'
})

export class LanguageTranslationComponent {
constructor(private translate: TranslateService) {}

TranslateToEnglish() {
  this.translate.use('En');
}

TranslateToGerman() {
  this.translate.use('DE');
 }
}

LanguageTranslation.component.html

<p>{{ "title" | translate }}</p>

<div>
    <button (click)="translateToEnglish()">English</button>
    <button (click)="translateToGerman()">German</button>
</div>

In diesem Code erstellen wir eine LanguageTranslationComponent, die den TranslateService einfügt und zwei Schaltflächen zum Umschalten zwischen Englisch und Deutsch bereitstellt. Wenn auf eine Schaltfläche geklickt wird, rufen wir die TranslateLanguage-Methode im TranslateService mit dem entsprechenden Sprachcode auf.

Hinweis: Stellen Sie bei der Verwendung von this.translate.use(‘DE’) sicher, dass Sie den richtigen Sprachcode verwenden, da die Groß-/Kleinschreibung beachtet wird, und stellen Sie sicher, dass der Dateiname korrekt ist.

Abschluss:

Internationalisierung ist ein Schlüsselelement der modernen Softwareentwicklung und Angular bietet robuste Tools für die Erstellung mehrsprachiger Anwendungen. Mit der ngx-translate-Bibliothek wird die Implementierung von i18n in Angular sowohl einfacher als auch anpassungsfähiger.

In diesem Artikel haben wir erläutert, wie Sie mit ngx-translate Übersetzungsdateien generieren, Übersetzungen in Vorlagen anwenden und die Sprache innerhalb einer Angular-Anwendung wechseln. Wenn Sie diese Richtlinien befolgen, können Sie mühelos eine mehrsprachige App erstellen, die für Benutzer weltweit zugänglich ist.

Vielen Dank!

Wenn Sie Fragen haben, können Sie gerne Kommentare hinterlassen

Das obige ist der detaillierte Inhalt vonInternationalisierung (i) in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!