Webapp Übersetzung Browser?

Ich habe eine wichtige Frage. Es geht um Angular und darum, dass man die Anwendung übersetzen kann. Also was ich schaffen möchte ist es, dass die Anwendung sich anpasst an die Browser Spracheinstellung. Sprich ich stelle den Browser auf Englisch und die Anwendung ist auch englisch. Oder ich stelle auf deutsch den Browser und die Einstellung ist auch auf deutsch.

Die Erkennung, welche Sprache der Browser hat funktioniert zwar, aber die Anwendung dass die App dann auch entsprechend in der Sprache dargestellt wird funktioniert nicht.

Also ich verwende die angular localization und alles damit verbunden i18n

ich habe auch von ngx translate gelesen. Aber ich komm nicht weiter

Answer 1

[regex9]

Installiere dir zuerst das @angular/localize-Paket und füge einen i18n-Knoten in deiner angular.json hinzu, um die Standardsprache und deren Übersetzungen zu definieren. Unter architect/build kannst du noch weitere Optionen für den Build vorgeben (lies dazu hier).

Beispiel:

"projects": {
  "your-angular-project": {
    /* ... */
    "i18n": {
      "sourceLocale": "en-US", // default
      "locales": {
        "de": {
          "translation": "src/locale/messages.de.xlf"
        }
        "fr": {
          "translation": "src/locale/messages.fr.xlf"
        }
      }
    },
    "architect": {
      "build": {
        /* ... */
        "options": {
          "i18nMissingTranslation": "error",
          "localize": true,
          /* ... */
        }
      }
    }
  }
}

Wie du siehst, wird je Sprache eine Datei spezifiziert, welche die Übersetzungen beinhaltet. Diese Dateien kannst du später anlegen. Forme zuvor deine HTML-Templates um. Elemente, deren Inhalt übersetzt werden soll, werden mit einem i18n-Attribut gekennzeichnet. Inline-Text wird in ein ng-container-Element geschrieben.

Beispiel:

<p i18n>Today is a beautiful day.</p>
<ng-container i18n>I'go to the park.</ng-container>

Weiteres dazu steht in der Dokumentation.

Danach kannst du dir mittels der Angular-CLI die oben erwähnten Übersetzungsdateien generieren lassen:

ng extract-i18n

Es gibt dabei stets eine messages.xlf, die als Basis dient. Sie beinhaltet mehrere trans-unit-Elemente, die die jeweiligen Einträge abbilden, welche übersetzbar sind.

Die Dateien für die einzelnen Übersetzungen (z.B. messages.de.xlf) haben im Grunde dieselbe Struktur, bekommen aber noch ein paar Zusatzinformationen. Stelle als Erstes sicher, dass es ein target-language-Attribut auf dem file-Element gibt.

Beispiel:

<file ... target-language="de">

Dann musst du noch je trans-unit die Übersetzung ergänzen.

Beispiel:

<trans-unit id="..." datatype="html">
  <source>Today is a beautiful day.</source>
  <target>Heute ist ein wundervoller Tag.</target>
  <!-- ... -->
</trans-unit>

Erneut findest du weitere Informationen hierzu in der Dokumentation.

Comments

[steve123600]

Hi danke sehr aber du hast nicht ganz verstanden was ich meine. Wenn ich den Browser umstelle auf die verschiedene Sprachen. Also in den Einstellungen des Browsers die Sprache global auf englisch stelle dann soll auch die Anwendung komplett englisch sein

[regex9]

@steve123600

Ok, dafür ist, wie du schon herausgefunden hast, ngx-translate das richtige Feature. Orientiere dich an diesem Guide, er stellt alle wichtigen Schritte von Schritt 1 an vor. In der app.component.ts kannst du die vom Nutzer im Browser gesetzte Sprache ermitteln und via TranslationService wechseln.

export class AppComponent {
  constructor(private translationService: TranslateService) {
    const browserLanguage = this.translationService.getBrowserLang();
    this.translationService.use(browserLanguage || "en");
  }

  /* ... */
}