<t> 组件
将您的内容包装在 <t> 组件中进行翻译。在翻译加载之前，会显示原始内容。
<t>This content will be translated</t>
带有绑定的文本也可以。每当内容发生变化时，例如当 name 更改时，内容都会再次翻译：
<t>Hello {{ name() }}</t>
对于经常更改的值，例如名称和计数，请改用变量，因此文本只能翻译一次。
同时请求的所有翻译都将通过单个请求发送到 API，并缓存翻译。你可以随心所欲地使用任意数量的 <t> 组件。
<mt-translate> 用作备用选择器，而 Translate 与 T 是同一个组件。
输入
| 输入 | 类型 | 描述 |
|---|---|---|
formality | 'informal' | 'formal' | 设置翻译的形式。 |
id | string | 允许您自行编辑文本的这种用法。它未设置为元素的 id。 |
lang | Language | 用 provideMagicTranslate 覆盖语言集。 |
v | Record<string, unknown> | 未翻译的值，在内容中以 $name 的形式引用。参见变量。 |
<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，则最长的那个获胜。 - 同一个名称可以出现多次。
- 值以文本形式插入，而不是以 HTML 形式插入。改为在它们周围的文本中加上标记：
Hi <b>$name</b>. - 变量只能在文本中替换，不在诸如
href或title之类的属性中替换。 - 在开发模式下，文本中未出现的密钥会记录警告，这会捕获错别字。
- 使用服务器端渲染，带有
[v]的<t>在服务器上呈现为空，并在应用程序在浏览器中运行后出现。
变量使用 $name 而不是 {name}，因为 Angular 读取模板中的单个 { 作为 ICU 消息的开头，并且模板无法编译。
局限性
- 你不能将 Angular 组件放在
<t>组件中。纯 HTML 元素没问题（参见下面的示例）。翻译后的标记通过 Angular 的 HTML 清理器。 <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。