스킬 Angular CDK Integration
🔧
Angular CDK Integration
안전
使用 CDK 工具构建 Angular UI
创建拖放界面、浮层和虚拟滚动列表需要深入了解 Angular CDK 模式。本技能提供可直接使用的代码示例和最佳实践，帮助您在 Angular 应用程序中实现复杂的 UI 交互。
지원: Claude Codex Code(CC)
1
스킬 ZIP 다운로드
2
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
3
토글을 켜고 사용 시작
테스트해 보기
"Angular CDK Integration" 사용 중입니다. Create a drag-and-drop interface with two connected lists
예상 결과:
- Import CdkDropList and CdkDrag from @angular/cdk/drag-drop
- Set up drop list with [cdkDropListConnectedTo] to link lists
- Handle drop events with CdkDragDrop interface
- Use moveItemInArray for reordering, transferArrayItem for moving between lists
- Add drag placeholder with *cdkDragPlaceholder for visual feedback
보안 감사
안전v3 • 1/10/2026
Pure documentation skill containing only markdown content with TypeScript code examples. No executable code, scripts, network calls, filesystem access, or external commands detected.
1
스캔된 파일
364
분석된 줄 수
0
발견 사항
3
총 감사 수
보안 문제를 찾지 못했습니다
감사자: claude 감사 이력 보기 →
품질 점수
38
아키텍처
100
유지보수성
83
콘텐츠
21
커뮤니티
100
보안
52
사양 준수
만들 수 있는 것
交互式任务看板
使用拖放功能构建在列之间移动的看板风格任务看板
浮动菜单
使用 Overlay 系统创建可访问的下拉菜单、工具提示和弹出框
性能优化列表
使用虚拟滚动高效显示数千个项目
이 프롬프트를 사용해 보세요
基础拖放
使用 Angular CDK 拖放模块创建包含三列（待办、进行中、已完成）的拖放任务看板。包含拖动项的占位符样式。
浮层菜单
使用 Angular CDK Overlay 服务实现下拉菜单。包含背景点击处理和销毁时的正确清理。
虚拟滚动
使用 Angular CDK ScrollingModule 创建虚拟滚动组件，以 50 像素的 itemSize 高效渲染 10000 个项目。
平台检测
构建一个组件来检测并显示当前浏览器（Firefox、Edge、Safari、WebKit）、移动平台（iOS、Android）和其他平台功能。
모범 사례
- 导入特定的 CDK 模块而不是完整的 @angular/cdk 包，以减小包体积
- 始终在 ngOnDestroy 中清理浮层、订阅和门户附件
- 对于超过 100 个项目的列表使用虚拟滚动以保持性能
피하기
- 在服务或仓库中使用 CDK 指令而不是 UI 层组件
- 创建浮层而不实现清理逻辑
- 在实现拖放和浮层交互时跳过可访问性测试
자주 묻는 질문
支持哪些 Angular CDK 版本？
兼容 @angular/cdk 版本 20.x 和 Angular 20.3.x 或更高版本。
虚拟滚动的最大列表大小是多少？
Angular CDK 虚拟滚动可以高效处理数千个项目。性能取决于项目大小的复杂性。
如何连接多个拖放列表？
使用 [cdkDropListConnectedTo] 输入属性来指定连接的拖放列表 ID 数组。
剪贴板访问安全吗？
是的，Angular CDK 剪贴板使用浏览器剪贴板 API，出于安全考虑需要用户手势。
为什么我的浮层不显示？
检查位置策略是否正确配置、elementRef 是否有效，以及浮层是否有足够的空间显示。
CDK 与 Material 组件相比如何？
Angular CDK 提供底层原语而不包含样式。Material 基于 CDK 构建，提供预样式化的组件。