<t> コンポーネント

翻訳するには、コンテンツを <t> コンポーネントで囲んで。翻訳が読み込まれるまで、元のコンテンツが表示される。

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

バインディング付きのテキストも使える。コンテンツは、name が変更された場合など、変更されるたびに再度翻訳される。

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

名前やカウントなど、頻繁に変更される値については、代わりに変数を使用して、テキストが一度だけ翻訳される。

同時にリクエストされたすべての翻訳は、1回のリクエストでAPIに送信され、翻訳はキャッシュされる。<t> コンポーネントは好きなだけ使える。

<mt-translate> は代替セレクターとして機能し、Translate は T と同じコンポーネントだ。

インプット

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

変数

名前やカウントなど、変化する値を [v] に渡し、内容では $name として参照する:

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

Magic Translate は、値の周りのテキストを Hi {0}, you have {1} new messages として一度翻訳し、値をアプリに戻す。翻訳はキャッシュされ、すべての名前とすべてのカウントで機能し、値自体が Magic Translate に送信されることはない。値だけが変わると、新しいリクエストは行われない。

値には最初に表示された順序で番号が付けられている。翻訳は、{1} neue Nachrichten für {0} のように、言語で必要な場所に移動できる。

値の周りのテキストにはHTMLを含めることができ、値は最初に 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>

いくつかのルール：

• [v] のキーだけが置き換えられるので、$5 などのテキストはそのまま残る。count と counts のように、2つのキーが同じように始まる場合は、最も長いキーが優先される。
• 同じ名前が複数回表示されることもある。
• 値はHTMLではなくテキストとして挿入される。代わりに、周囲のテキストにマークアップを入れて:Hi <b>$name</b>.
• 変数はテキストでのみ置換され、href や title などの属性では置換されない。
• 開発モードでは、テキストに表示されていないキーは警告を記録し、タイプミスをキャッチする。
• サーバー側のレンダリングでは、<t> と [v] はサーバー上で空になり、アプリがブラウザーで実行されると表示されるよ。

変数は {name} ではなく $name を使う。なぜなら Angular はテンプレート内の 1 つの { を ICU メッセージの先頭として読み込み、テンプレートはコンパイルされないからだ。

制限事項

1. Angular コンポーネントを <t> コンポーネントの中に入れることはできない。プレーンなHTML要素でも問題ない（下の例を参照）。翻訳されたマークアップは Angular の HTML サニタイザーを通過する。
2. <t> コンポーネント内のコンテンツは、10 KB、つまり約5,000文字を超えてはいけない。

<!-- 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>

属性やその他の文字列を翻訳するには、t pipe を使う。