使用 @switch 进行切换
使用 @switch 和 @case 选择模板。
使用 @switch 进行切换 是 CoddyKit 上的免费 Angular Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Angular Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。
使用 switch 进行切换
at-switch 区块会根据某个值从多个分支中选择一个，类似 switch 语句。它与 at-case 和 at-default 搭配使用。
基本 switch 语法
先写 at-switch，并在圆括号中写表达式，然后写一个或多个 at-case 区块，每个区块都带有匹配值。
// @switch (status) {
// @case ('loading') { <p>Loading...</p> }
// @case ('error') { <p>Error!</p> }
// @default { <p>Ready</p> }
// }case 区块
每个 at-case 都会在圆括号中接收一个值。第一个值与 switch 表达式严格相等的 case 会被渲染。
default 区块
当没有匹配的 case 时，at-default 区块会进行渲染。它不是必需的，但为了完整性，建议使用。
严格相等
匹配使用严格相等（===）。请确保 case 值与 switch 表达式的类型相同。
根据信号进行切换
switch 表达式可以是信号调用，因此视图会随着信号变化而更新。
// @switch (state()) {
// @case ('on') { <p>On</p> }
// @case ('off') { <p>Off</p> }
// }替代 ngSwitch
它以更简洁的语法取代了由 ngSwitch、带星号的 ngSwitchCase 和带星号的 ngSwitchDefault 指令组成的旧式组合，并且无需导入。
只渲染一个分支
at-switch 恰好渲染一个匹配的分支（或默认分支）。其他分支完全不会存在于 DOM 中。
枚举和常量
case 可以与组件公开的枚举成员或常量进行比较，从而提高可读性和类型安全性。
在 switch 中嵌套
每个 case 区块都可以包含任意模板内容，包括 at-if 和 at-for 等其他控制流区块。
何时使用 switch
当您需要根据单个值在多个离散 case 之间进行分支时，建议使用 at-switch，而不是很长的 at-if / at-else if 链。
快速检查：switch
switch 区块的备用分支。
回顾：切换
您学习了使用严格相等匹配 at-case 分支、并带有可选 at-default 备用分支的 at-switch 区块。它取代了 ngSwitch，并且恰好渲染一个分支。下一步：使用 at-defer 延迟加载。
常见问题解答
「使用 @switch 进行切换」课时是免费的吗？
是的 — 「使用 @switch 进行切换」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。
「使用 @switch 进行切换」这节课中我会学到什么？
使用 @switch 和 @case 选择模板。 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Angular Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「使用 @switch 进行切换」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Angular Academy 课中编写并运行代码吗？
能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 使用 @if 进行条件渲染
- 使用 @for 循环
- 使用 @switch 进行切换
- 使用 @defer 延迟加载