Angular Components v20.0.0-next.0 版本深度解析

Angular Components 是 Angular 官方维护的 UI 组件库，为开发者提供了一系列高质量、可访问性良好的 Material Design 风格组件。本次发布的 v20.0.0-next.0 版本作为 20.0.0 的第一个预发布版本，引入了一些重要的变更和改进。

核心变更概述

CDK 模块改进

在 CDK（Component Dev Kit）模块中，修复了拖放功能中的一个类型定义问题。原本的 DragConstrainPosition 类型定义不正确，可能导致开发者在约束拖拽位置时遇到类型检查错误。这个修复确保了类型系统能够正确反映拖拽约束位置的实际情况。

Material 按钮组件重构

Material 按钮组件经历了一次重要的重构，将 MatButton 和 MatAnchor 两个类合并为一个。这一变化简化了按钮组件的实现结构，减少了代码重复，使维护更加容易。不过这也带来了一个需要注意的兼容性问题：

重要变更影响：在合并后的版本中，通过 [attr.tabindex] 设置的 tabindex 属性可能无法按预期工作。开发者应该改用以下方式：

• 对于静态值：使用 tabindex 属性
• 对于动态值：使用 [tabindex] 或 [tabIndex] 绑定

实验性 UI 模式新增

在 CDK 实验性模块中，新增了一个列表盒（listbox）UI 模式。这个模式为开发者提供了构建可访问性良好的列表选择交互的基础设施，遵循 WAI-ARIA 的 listbox 模式规范。虽然目前还处于实验性阶段，但这个功能为未来可能加入标准库的列表选择组件奠定了基础。

废弃 API 清理

本次版本继续推进对已废弃 API 的清理工作，移除了多个与 ComponentFactoryResolver 相关的引用。这一变更反映了 Angular 生态向 Ivy 编译器和独立组件 API 的迁移趋势。受影响的 API 包括：

• DialogConfig.componentFactoryResolver 已被移除
• DomPortalOutlet 的构造函数签名变更
• ComponentPortal 相关的 componentFactoryResolver 属性和构造函数变更
• MatDialogConfig.componentFactoryResolver 已被移除

这些变更意味着开发者需要更新他们的代码，不再依赖 ComponentFactoryResolver，而是使用 Angular 现代 API 来实现动态组件加载等功能。

升级建议

对于计划升级到 Angular Components v20 的开发者，建议：

1. 首先检查项目中是否使用了 [attr.tabindex] 来设置按钮的可访问性，并按照上述建议进行修改。
2. 审查代码中是否使用了任何被移除的 ComponentFactoryResolver 相关 API，并寻找替代方案。
3. 对于实验性功能，如新的 listbox UI 模式，可以在非生产环境中先行试用，提供反馈，但避免在生产环境中直接使用。
4. 由于这是一个预发布版本，建议在测试环境中充分验证后再考虑应用到生产环境。

这个版本展示了 Angular Components 团队持续优化代码结构、移除过时 API 的努力，同时也为未来的功能扩展奠定了基础。开发者可以期待在后续的正式版本中看到更多稳定性和功能性的改进。