SuperAPI AI 工具集

angular-cdk

前端与建站

查看项目

更新于 10-15 15:45

技能介绍

用途 Angular CDK(Component Dev Kit,组件开发工具包)用于在 Angular 中构建自定义 UI 组件。资料强调应使用 CDK 构建自己的组件,而不引入 Material 样式,即只复用行为与交互逻辑,视觉层由开发者自行实现。其标签涵盖无障碍(Accessibility)、拖放(Drag & Drop)、浮层(Overlay)、虚拟滚动(Virtual Scroll)和传送门(Portal)。

版本与 API 变化 资料标注版本为 21.0.3(2026 年 2 月),并提供官方文档、GitHub 与 API 参考链接。记录的变化包括:CDK 浮层现在使用浏览器内置 popover 以改善无障碍;Angular 19 提供基于 signal 的 API,用于 CDK 组件的现代化 signal 集成;改进的焦点管理,增强对 cdkTrapFocus 与 cdkFocusRegion 的支持;拖放改进,增强列表之间的条目复制能力;旧版浮层策略被弃用,建议使用滚动策略配置替代这些被弃用的做法。

主要能力与使用方式 浮层(Overlay)与传送门(Portal):通过导入 OverlayModule 与 PortalModule 构建自定义下拉等组件。使用 Overlay 构建浮动面板,例如提示(tooltip)、下拉(dropdown)与模态(modal)。示例中通过 Overlay.create 配置 hasBackdrop 与 positionStrategy,使用 connectedTo 指定相对原点的位置、偏移量(withOffsetX、withOffsetY)。Portal 用于动态内容,示例使用 DomPortalOutlet 与 TemplatePortal,将模板挂载到 document.body。

拖放(Drag & Drop):用于可排序列表。导入 CdkDragDrop、moveItemInArray、transferArrayItem 处理 drop 事件;当 event.previousContainer 与 event.container 相同时使用 moveItemInArray 调整顺序,不同时使用 transferArrayItem 在列表间转移条目。

虚拟滚动(Virtual Scroll):用于大列表。导入 ScrollingModule,在模板中使用 cdk-virtual-scroll-viewport 并设置 itemSize,配合 *cdkVirtualFor 渲染条目。

无障碍(A11y):导入 A11yModule、CdkTrapFocus、LiveAnnouncer。模板中用 cdkTrapFocus 限定焦点区域,cdkFocusInitial 指定初始焦点;通过 LiveAnnouncer.announce 向屏幕阅读器播报消息。

布局(Layout):导入 LayoutModule,通过 BreakpointObserver 观察断点(示例为 '(max-width: 599px)')实现响应式内容切换。

适用场景 需要构建无 Material 样式的自定义组件;需要实现提示、下拉、模态等浮动面板;需要可排序或跨列表拖放;需要渲染大列表并优化性能;需要管理焦点与屏幕阅读器播报;需要按断点做响应式布局。

限制 资料未提供收费、价格、平台限制、性能指标或具体使用步骤之外的说明;未提及除上述标签与模块之外的其他能力。缺失信息暂未提供。