Die <t>-Komponente

Binde deinen Inhalt in die Komponente <t> ein, um ihn zu übersetzen. Der Originalinhalt wird angezeigt, bis die Übersetzung geladen ist.

<t>This content will be translated</t>

Text mit Bindungen funktioniert auch. Der Inhalt wird immer wieder übersetzt, wenn er sich ändert, zum Beispiel wenn sich name ändert:

<t>Hello {{ name() }}</t>

Für Werte, die sich häufig ändern, wie Namen und Zählungen, verwende stattdessen Variablen, sodass der Text nur einmal übersetzt wird.

Alle gleichzeitig angeforderten Übersetzungen werden in einer einzigen Anfrage an die API gesendet und die Übersetzungen werden zwischengespeichert. Du kannst so viele <t>-Komponenten verwenden, wie du möchtest.

<mt-translate> funktioniert als alternativer Selektor und Translate ist dieselbe Komponente wie T.

Eingaben

<t lang="fr" formality="formal">How are you?</t>

Variablen

Übergib Werte, die sich ändern, wie einen Namen oder eine Anzahl, in [v] und referenziere sie im Inhalt als $name:

<t [v]="{ name: user.name, count: unread() }">
  Hi $name, you have $count new messages
</t>

Magic Translate übersetzt den Text rund um die Werte einmal, als Hi {0}, you have {1} new messages, und fügt die Werte wieder in deine App ein. Die Übersetzung ist zwischengespeichert und funktioniert für jeden Namen und jede Anzahl, und die Werte selbst werden niemals an Magic Translate gesendet. Wenn sich nur die Werte ändern, wird keine neue Anfrage gestellt.

Die Werte sind in der Reihenfolge nummeriert, in der sie zuerst erscheinen. Die Übersetzung kann sie überall hin bewegen, wo die Sprache sie braucht, zum Beispiel {1} neue Nachrichten für {0}.

Der Text rund um die Werte kann HTML enthalten und die Werte können zuerst mit pipes formatiert werden:

<t [v]="{ count: cart.items.length, total: cart.total | currency }">
  You have <b>$count items</b> in your cart, totalling <b>$total</b>.
</t>

Ein paar Regeln:

• Nur Schlüssel von [v] werden ersetzt, sodass Text wie $5 so bleibt, wie er ist. Wenn zwei Schlüssel auf dieselbe Weise beginnen, wie count und counts, gewinnt die längste.
• Derselbe Name kann mehr als einmal vorkommen.
• Werte werden als Text eingefügt, niemals als HTML. Füge stattdessen Markup in den Text um sie herum ein: Hi <b>$name</b>.
• Variablen werden nur im Text ersetzt, nicht in Attributen wie href oder title.
• Im Entwicklungsmodus protokolliert eine Taste, die nicht im Text erscheint, eine Warnung, die Tippfehler auffängt.
• Beim serverseitigen Rendern wird ein <t> mit [v] auf dem Server leer gerendert und erscheint, sobald die App im Browser läuft.

Variablen verwenden $name statt {name}, weil Angular ein einzelnes { in einer Vorlage als Anfang einer ICU-Nachricht liest und die Vorlage nicht kompiliert wird.

Einschränkungen

1. Du kannst keine Angular-Komponenten in die Komponente <t> setzen. Einfache HTML-Elemente sind in Ordnung (siehe das Beispiel unten). Das übersetzte Markup durchläuft das HTML-Desinfektionsmittel von Angular.
2. Der Inhalt einer <t>-Komponente darf 10 KB nicht überschreiten, was etwa 5.000 Zeichen entspricht.

<!-- this is OK, since <a> is a plain HTML element -->
<t>
  <a href="mailto:info@i42.ch">Please send us an email</a>
</t>

<!-- this does NOT work, since <app-button> is an Angular component -->
<t>
  <app-button>Click me</app-button>
</t>

Um Attribute und andere Zeichenketten zu übersetzen, verwende t pipe.