标记待翻译文本
使用 i18n 属性标记可翻译文本
标记待翻译文本 是 CoddyKit 上的免费 Angular Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Angular Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。
国际化解决了什么问题
国际化（i18n） 是对应用进行准备，使其中的文本能够翻译成其他语言，而无需修改代码。Angular 内置了 i18n 系统，可通过在模板中使用 i18n 属性标记可翻译文本。
i18n 属性
将 i18n 属性添加到任何需要翻译其文本的元素上。Angular 会在构建时收集这些文本，并根据区域设置替换相应内容。
<h1 i18n>Welcome to our store</h1>
<p i18n>Choose a product to begin.</p>翻译属性
要翻译 HTML 属性（例如 title 或 placeholder），请在属性名前加上 i18n- 前缀。
<input placeholder="Search" i18n-placeholder />
<img src="logo.png" alt="Company logo" i18n-alt />含义与说明
您可以使用 i18n="meaning|description" 语法为翻译人员提供上下文。含义用于归类应共用同一翻译的相同短语；说明则用于解释使用场景。
<button i18n="cta|The main call to action on the home page">Get started</button>自定义 ID
在 @@ 后添加稳定的自定义 ID，使翻译不受文本编辑影响。如果没有自定义 ID，修改源文本会生成新的 ID，并丢失现有翻译。
<h1 i18n="@@homeTitle">Welcome to our store</h1>已翻译文本中的插值
已翻译文本中的绑定会变成占位符。翻译人员会看到一个命名标记，并可以根据目标语言的语序重新调整其位置。
<p i18n>Hello, {{ name }}! You have {{ count }} new messages.</p>使用 $localize 标记组件中的文本
对于 TypeScript 中的字符串（而不是模板中的字符串），请使用 $localize 为其添加标记。它会像 i18n 属性标记模板一样，将该字符串标记为待提取内容。
const greeting = $localize('Welcome back'); // tagged-template form, marked for extraction为什么不能直接拼接字符串
硬编码并拼接文本（'You have ' + n + ' items'）会破坏翻译：不同语言的语序不同，复数规则也各不相同。使用 i18n 标记完整短语，可以让翻译人员保持正确的语法结构。
翻译嵌套标记
当可翻译文本包含子元素时，Angular 会将这些子元素保留为占位符，避免翻译人员意外删除标记。
<p i18n>Read our <a href="/terms">terms of service</a> before continuing.</p>保持源文本整洁
请以最合理的最小单位标记文本，通常是完整句子或标签。避免将一个句子拆分到多个 i18n 块中，因为每个片段都会成为单独的字符串，从而更难翻译。
构建时会发生什么
i18n 属性本身不会产生运行时开销：Angular 会在针对每个区域设置进行编译时替换已标记的文本，并生成单独的优化构建包。我们将在接下来的课程中提取并翻译这些字符串。
快速检查
如何翻译 placeholder 属性？
回顾
使用 i18n 属性标记模板文本，使用 i18n-attr 标记属性。添加 meaning|description 提供上下文，并使用 @@customId 创建稳定的 ID。绑定会变成占位符，TypeScript 字符串使用 $localize。标记过程不会产生任何运行时开销。
常见问题解答
「标记待翻译文本」课时是免费的吗？
是的 — 「标记待翻译文本」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。
「标记待翻译文本」这节课中我会学到什么？
使用 i18n 属性标记可翻译文本 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Angular Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「标记待翻译文本」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Angular Academy 课中编写并运行代码吗？
能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 标记待翻译文本
- 提取并翻译消息
- 复数与选择（ICU）
- 构建本地化构建版本