Angular Academy · Lektion

Text für die Übersetzung markieren

i18n-Attribute verwenden, um übersetzbaren Text zu markieren

Text für die Übersetzung markieren ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Was Internationalisierung ermöglicht

Internationalisierung (i18n) bedeutet, Ihre App so vorzubereiten, dass ihr Text in andere Sprachen übersetzt werden kann, ohne den Code zu ändern. Angular verfügt über ein integriertes i18n-System, das auf der Kennzeichnung übersetzbarer Texte in Templates mit dem Attribut i18n basiert.

Das i18n-Attribut

Fügen Sie das Attribut i18n zu jedem Element hinzu, dessen Text übersetzt werden soll. Angular sammelt diese Texte beim Build und ersetzt den Inhalt je nach Locale.

<h1 i18n>Welcome to our store</h1>
<p i18n>Choose a product to begin.</p>

Attribute übersetzen

Um ein HTML-Attribut wie title oder placeholder zu übersetzen, stellen Sie ihm i18n- voran.

<input placeholder="Search" i18n-placeholder />
<img src="logo.png" alt="Company logo" i18n-alt />

Bedeutung und Beschreibung

Mit der Syntax i18n="meaning|description" können Sie Übersetzern Kontext geben. Die Bedeutung gruppiert identische Ausdrücke, die dieselbe Übersetzung erhalten sollen; die Beschreibung erläutert die Verwendung.

<button i18n="cta|The main call to action on the home page">Get started</button>

Benutzerdefinierte IDs

Fügen Sie nach @@ eine stabile benutzerdefinierte ID hinzu, damit eine Übersetzung Änderungen am Text übersteht. Ohne diese ID erzeugt eine Änderung des Quelltexts eine neue ID und die vorhandene Übersetzung geht verloren.

<h1 i18n="@@homeTitle">Welcome to our store</h1>

Interpolationen in übersetztem Text

Bindings in übersetztem Text werden zu Platzhaltern. Übersetzer sehen ein benanntes Token, das sie für ihre Sprache an eine andere Stelle setzen können.

<p i18n>Hello, {{ name }}! You have {{ count }} new messages.</p>

Text in Komponenten mit $localize markieren

Für Zeichenfolgen in TypeScript, nicht in Templates, verwenden Sie das Tag $localize. Es markiert die Zeichenfolge zur Extraktion, genau wie das Attribut i18n bei Templates.

const greeting = $localize('Welcome back'); // tagged-template form, marked for extraction

Warum Zeichenfolgen nicht einfach verkettet werden sollten

Hartcodierter und verketteter Text ('You have ' + n + ' items') erschwert die Übersetzung: Die Wortstellung unterscheidet sich je nach Sprache und auch die Pluralregeln sind unterschiedlich. Wenn ganze Ausdrücke mit i18n markiert werden, bleibt die Grammatik für Übersetzer intakt.

Verschachteltes Markup übersetzen

Wenn übersetzbarer Text untergeordnete Elemente enthält, bewahrt Angular diese als Platzhalter, damit Übersetzer das Markup nicht versehentlich entfernen können.

<p i18n>Read our <a href="/terms">terms of service</a> before continuing.</p>

Quelltext übersichtlich halten

Markieren Sie Text auf der kleinsten sinnvollen Einheit, normalerweise einem vollständigen Satz oder einer Beschriftung. Vermeiden Sie es, einen Satz auf mehrere i18n-Blöcke aufzuteilen, da jedes Fragment zu einer separaten und schwerer zu übersetzenden Zeichenfolge wird.

Was beim Build geschieht

Das Attribut i18n selbst verursacht keine Laufzeitkosten: Angular ersetzt markierten Text während der Kompilierung für jede Locale und erzeugt ein separates, optimiertes Bundle. In den nächsten Lektionen extrahieren und übersetzen wir diese Zeichenfolgen.

Schnelltest

Wie übersetzen Sie ein Placeholder-Attribut?

Zusammenfassung

Markieren Sie Template-Text mit dem Attribut i18n und Attribute mit i18n-attr. Fügen Sie meaning|description als Kontext und @@customId für stabile IDs hinzu. Bindings werden zu Platzhaltern, und für TypeScript-Zeichenfolgen verwenden Sie $localize. Das Markieren verursacht keinerlei Laufzeitkosten.

Häufig gestellte Fragen

Ist die Lektion „Text für die Übersetzung markieren“ kostenlos?

Ja — der vollständige Text von „Text für die Übersetzung markieren“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Text für die Übersetzung markieren“?

i18n-Attribute verwenden, um übersetzbaren Text zu markieren Du übst Angular Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Angular Academy zu starten?

Keine Vorkenntnisse erforderlich. Angular Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Text für die Übersetzung markieren“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Angular Academy-Lektion Code schreiben und ausführen?

Ja. Jede Angular Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Angular Academy