Dokumentacja

Komponent <t>

Owiń zawartość w komponencie <t>, aby ją przetłumaczyć. Oryginalna zawartość jest wyświetlana do momentu załadowania tłumaczenia.

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

Tekst z wiązaniami również działa. Treść jest ponownie tłumaczona za każdym razem, gdy się zmienia, na przykład gdy zmienia się name:

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

W przypadku wartości, które często się zmieniają, takich jak nazwy i liczby, zamiast tego użyj zmiennych, więc tekst jest tłumaczony tylko raz.

Wszystkie tłumaczenia żądane w tym samym czasie są wysyłane do interfejsu API w jednym żądaniu, a tłumaczenia są buforowane. Możesz używać dowolnej liczby komponentów <t>.

<mt-translate> działa jako alternatywny selektor, a Translate jest tym samym składnikiem co T.

Wejścia

WejścieTypOpis
formality'informal' | 'formal'Ustawia formalność tłumaczenia.
idstringUmożli wia samodzielną edycję tego użycia tekstu. Nie jest ustawiony jako id elementu.
langLanguageZastępuje ustawiony język za pomocą provideMagicTranslate.
vRecord<string, unknown>Wartości, które nie są przetłumaczone, odnoszone jako $name w treści. Zobacz Zmienne.
<t lang="fr" formality="formal">How are you?</t>

Zmienne

Przekaż zmieniające się wartości, takie jak nazwa lub liczba, w [v] i odniesienie do nich jako $name w treści:

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

Magic Translate tłumaczy tekst wokół wartości raz, jako Hi {0}, you have {1} new messages, i ponownie umieszcza wartości w aplikacji. Tłumaczenie jest przechowywane w pamięci podręcznej i działa dla każdego imienia i każdej liczby, a same wartości nigdy nie są wysyłane do Magic Translate. Gdy zmieniają się tylko wartości, żadne nowe żądanie nie jest składane.

Wartości są ponumerowane w kolejności, w jakiej pojawiają się po raz pierwszy. Tłumaczenie może przenosić je wszędzie tam, gdzie ich potrzebuje język, na przykład {1} neue Nachrichten für {0}.

Tekst wokół wartości może zawierać HTML, a wartości można najpierw sformatować za pomocą pipes:

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

Kilka zasad:

  • Zastępowane są tylko klawisze [v], więc tekst taki jak $5 pozostaje taki, jaki jest. Jeśli dwa klawisze zaczynają się w ten sam sposób, takie jak count i counts, wygrywa najdłuższy.
  • Ta sama nazwa może pojawić się więcej niż raz.
  • Wartości są wstawiane jako tekst, nigdy jako HTML. Zamiast tego umieść znaczniki w tekście wokół nich: Hi <b>$name</b>.
  • Zmienne są zastępowane tylko w tekście, a nie w atrybutach takich jak href lub title.
  • W trybie programistycznym klucz, który nie pojawia się w tekście, rejestruje ostrzeżenie, które przechwytuje literówki.
  • W przypadku renderowania po stronie serwera <t> z [v] renderuje się puste na serwerze i pojawia się po uruchomieniu aplikacji w przeglądarce.

Zmienne używają $name zamiast {name}, ponieważ Angular odczytuje pojedynczy { w szablonie jako początek wiadomości ICU, a szablon nie kompiluje się.

Ograniczenia

  1. Nie można umieścić komponentów Angular wewnątrz komponentu <t>. Zwykłe elementy HTML są w porządku (patrz przykład poniżej). Przetłumaczony znacznik przechodzi przez odkażacz HTML Angular.
  2. Zawartość w składniku <t> nie może przekraczać 10 KB, czyli około 5000 znaków.
<!-- 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>

Aby przetłumaczyć atrybuty i inne ciągi, użyj t pipe.

PoprzednieAngularKolejnyt pipe