关注「索引目录」公众号，获取更多干货。
Angular 21.1 现已发布，对 Signal Forms、控制流语法、路由 API 和开发者工具进行了重大改进。此版本着重提升开发者体验，并弥补了现有 API 中的重要缺陷。
在本指南中，我们将详细介绍每个功能，解释何时应该使用它，并提供实际的代码示例，以帮助您在项目中采用这些更改。
本次发布包含哪些内容
- 信号形式
：新的 formField指令和形式聚焦功能 - 控制流
@switch：块中的多情况支持 - 图片加载器
：为主要 CDN 提供商提供自定义转换 - 路由
： isActive作为信号、实验性路线清理和导航 API 集成 - 开发者工具
：用于 SSR/hydration 调试的新稳定性调试器 - 模板表达式
：支持扩展运算符和剩余参数
信号形式改进
Angular 的 Signal Forms API 在此版本中继续完善，解决了实际使用模式和开发者反馈的问题。
新的 formField 指令
Angular 21.1 引入了formField指令，作为将 Signal 表单控件绑定到表单元素的首选方式。虽然现有的field指令仍然有效，但 Angular 团队建议formField今后采用新的指令。
为什么要更改名称？原来的名字field过于通用，可能会与应用程序中的其他库或自定义指令冲突。新formField指令提供了一个更明确、更符合 Angular 特性的命名空间。
<!-- Previous approach (still works, but will be deprecated) -->
<input type="email" [field]="loginForm.email" />
<!-- Recommended approach -->
<input type="email" [formField]="loginForm.email" />从底层来看，这两个指令的实现方式相同。查看 Angular 的内部代码可以发现，它们实际上是可以互换的选项：
readonly formFieldBindings: Signal<readonly (Field<unknown> | FormField<unknown>)[]>;迁移提示：虽然目前两种方法都可行，但预计未来版本会提供迁移流程图以实现自动化过渡。formField现在就开始在新代码中使用这些方法，以最大程度地减少未来的迁移工作。
注意：该 formField指令在技术上是在 Angular 21.0.8 中引入的，但此版本确保了编译器的完全支持以及与该field指令的完全一致。
通过程序控制表单焦点
常见的 UX 设计模式是在表单加载时或验证错误后将焦点放在第一个输入字段上。Angular 21.1 的新focusBoundControl()方法使这一操作变得非常简单。
以前，您需要使用viewChild模板引用手动定位特定字段。现在，您可以直接聚焦整个表单中的第一个绑定控件：
// Focus the first field in the form
this.loginForm().focusBoundControl();field此方法查找通过`or`指令绑定的第一个元素formField并将其聚焦——非常适合以下情况：
-
表单初始化 -
表单重置后 -
验证失败时（聚焦于第一个无效字段） -
无障碍改进
感谢Matthieu Riegler阐明了此功能的预期用途！
信号表单错误修复
此版本解决了 Signal Forms 中的一些特殊情况和缺失的功能：
- 允许自定义控件需要脏输入
- 允许自定义控件需要隐藏输入
- 允许自定义控件要求输入待处理信息
- 超时后清理中止监听器
- 支持使用非基于信号的模型进行自定义控制
- 支持信号形式中的只读数组
控制流程：多情况切换块
最受期待的控制流功能之一现已推出：现在可以@case()在单个代码块中组合多个条件@switch。
Angular 21.1 之前的版本
@switch(status) {
@case('pending') {
<status-badge>Waiting</status-badge>
}
@case('processing') {
<status-badge>Waiting</status-badge>
}
@case('completed') {
<status-badge>Done</status-badge>
}
}使用 Angular 21.1
@switch(status) {
@case('pending')
@case('processing') {
<status-badge>Waiting</status-badge>
}
@case('completed') {
<status-badge>Done</status-badge>
}
}这可以消除代码重复，并使模板更易于阅读——尤其适用于：
-
将相似状态（加载中、待处理、处理中）分组 -
使用同一用户界面处理多个枚举值。 -
减轻模板维护负担
图片加载器增强功能
如果您将 AngularNgOptimizedImage指令与 CDN 提供商配合使用，现在可以更好地控制图像转换。Angular 21.1 新增了对以下功能的自定义转换支持：
- Cloudflare
图片 - 云端
- ImageKit
- Imgix
这意味着您可以应用特定于提供商的转换（如格式转换、质量调整或特效），同时仍然可以受益于 Angular 的优化图像加载。
有关实现细节和配置示例，请参阅官方的 NgOptimizedImage 文档。
增强的模板表达式支持
Angular 的模板编译器现在支持更多 JavaScript 表达式功能：
-
函数调用中的剩余参数 - 展开
数组中的元素 -
在物体中 传播表情
@let merged = {...defaultConfig, ...userConfig};
@let combined = {a: 1, ...partialObject, b: 2};
@let nested = {config: {...{nested: {...deepConfig}}}};温馨提示：虽然这些特性现在都已支持，但它们可能会使模板更难阅读和调试。建议您将复杂的逻辑放在组件类中，并将简单的计算值暴露给模板。模板的主要职责是处理数据展示，而不是数据转换。
调试应用程序稳定性
服务器端渲染 (SSR) 和水合问题通常表现为应用程序永远无法“稳定”——阻止水合完成或导致意外行为。
Angular 21.1 引入了以下功能provideStabilityDebugging()来帮助诊断这些问题：
import { provideStabilityDebugging } from "@angular/core";
export const appConfig: ApplicationConfig = {
providers: [
// Add during development to debug stability issues
provideStabilityDebugging(),
],
};在开发模式下，此实用程序默认启用provideClientHydration。您也可以手动将其添加到应用程序提供程序中，以便在生产环境的 bundle 中使用，或者在不使用水合（hydration）的情况下使用 SSR 时使用。如果应用程序稳定运行的时间超出预期，此功能会将信息记录到控制台。
有关详细使用说明，请参阅官方文档中的“调试应用程序稳定性”部分。
路由器改进
路由提供程序清理（实验性功能）
Angular Router 中长期存在的一个问题：在路由级别定义的提供者在离开页面时不会被销毁。这可能导致内存泄漏和意外的状态持久化。
Angular 21.1 引入了一项实验性功能，可以自动清理路由级别的注入器：
import {
provideRouter,
withExperimentalAutoCleanupInjectors,
} from "@angular/router";
export const appConfig: ApplicationConfig = {
providers: [
provideRouter(routes, withExperimentalAutoCleanupInjectors()),
],
};何时使用此功能：如果您的路由定义了持有重要状态或资源的提供者，启用此功能可确保正确清理。请务必进行全面测试，因为这会改变应用程序可能依赖的生命周期行为。
Router.isActive 作为信号
该Router.isActive方法现在是一个计算信号，可以对导航状态进行细粒度的响应：
// Old approach (deprecated)
const isActive = this.router.isActive('/dashboard', true);
// New Signal-based approach
const isActive = this.router.isActive('/dashboard', true); // Returns Signal<boolean>软件包大小说明：此功能会使您的软件包大小增加约 1.3KB，但可通过摇树优化 (tree shaking) 来降低此影响。未使用Router.isActive此功能的应用程序RouterLinkActive不会产生此开销。
如果您正在实施自定义路由重用策略，现在可以集成此新行为。有关详细信息，请参阅自定义路由重用策略文档。
平台导航 API 集成（实验性）
浏览器的导航 API提供了一种现代化的导航处理方式。Angular 21.1 公开了实验性集成：
import { withExperimentalPlatformNavigation } from "@angular/router";
export const appConfig: ApplicationConfig = {
providers: [
provideRouter(routes, withExperimentalPlatformNavigation()),
],
};此实验性功能允许 Angular Router 利用浏览器原生导航处理，从而可能提高性能并更好地与浏览器功能（如后退/前进缓存）集成。
SSR API 一致性
创建应用程序改进
该createApplication函数现在接受一个BootstrapContext参数，使其与 . 保持一致bootstrapApplication。这在构建需要对应用程序创建进行细粒度控制的自定义 SSR 解决方案或测试框架时非常重要。
此外，createApplication现在可以与 JIT 编译的组件一起使用，消除了之前需要 AOT 编译的限制。
概括
Angular 21.1 对整个框架进行了切实的改进。
Signal Forms API 不断完善，控制流变得更加强大，开发者工具也日益改进。这些渐进式的改进随着时间的推移不断累积，使得 Angular 应用的构建和维护更加便捷。
要跟踪 Angular 各个版本的功能，请查看我们的“Can I Use - Features”工具，并通过“Release Insights”随时了解最新版本。
关注「索引目录」公众号，获取更多干货。