现代 Web 开发都是关于组件的。 Angular 为开发人员提供了一种方法来定义这些离散的 UI 块，然后将它们组合成应用程序。我们构建了组件开发套件 (CDK) 来为您的组件提供高质量的预定义行为。

Angular CDK 为开发人员提供了可靠、经过充分测试的工具，可以轻松添加常见的交互模式。无论您是编写通用的、可重用的组件库，还是为一个应用程序构建特定于域的组件，CDK 都可以帮助您在更短的时间内、用更少的代码和更少的错误构建所需的内容。 CDK 在样式方面也完全不持任何意见，因此可以轻松地根据任何视觉语言定制您的应用程序。我们的最终目标是让所有 Angular 组件库都能够利用 CDK，减少解决这些常见问题的重复工作。

CDK 是如何产生的？

从Angular Material的开发中，我们看到许多组件都有共同的模式。一些最明确的例子包括：

1、创建连接到某些原始元素（菜单、选择、自动完成、工具提示）的浮动面板

2、通过键盘浏览一组选项（菜单、选择、自动完成、列表）

3、将焦点捕获在页面的某个部分（对话框、侧导航）

4、在多个内容视图（选项卡、步进器）之间动态切换

意识到这些横切行为，我们努力为 Material Design 组件制作高度可重用的构建块。一旦这些构建块达到令人满意的成熟度，我们就将它们重构为@angular/cdk作为独立库。

CDK 包含什么？

CDK 分为多个子包，每个子包涵盖不同的职责范围。虽然可以在文档中找到完整的功能集，但让我们看一下一些亮点：

a11y — accessibility (可访问性)

a11y 子包包含一些实用程序，可帮助构建更易于访问的组件，特别是对于通过屏幕阅读器与网络交互的用户。屏幕阅读器用户主要使用键盘进行所有交互，因此 cdkFocusTrap 指令可以帮助创建对话框或弹出窗口常见的模式工作流程。对于看不到屏幕的用户来说，状态更新和通知也可能会出现问题，因此 LiveAnnouncer 服务可用于以非视觉方式显示此重要信息。

bidi — bidirectional text(双向文本)

bidi 子包中的 BidiModule 为所有组件提供了一个通用模式来获取和响应页面当前LTR / RTL 目录的更改。通过将此模块包含在您的应用程序中，每个组件都可以注入 Directionality 服务来读取当前方向并订阅后续更新。

overlay 覆盖

在 Angular Material 中，我们最常用的交互模式是浮动覆盖面板。这是菜单、选择、对话框、小吃栏、自动完成和工具提示的核心。所有这些组件都构建在CDK 的覆盖子包之上。在较高级别上，Overlay 服务提供了一个用于创建面板的简单 API。这些面板是高度可定制的，使组件作者可以控制大小、位置、滚动行为和外观。内置配置捕获常见的定位场景（例如，锚定到另一个元素）和滚动行为（例如，当触发器滚动到屏幕外时关闭）。不过，用户并不限于这些内置行为，并且可以使用自己的定位和/或滚动策略来自定义行为。

layout  布局

布局子包提供了BreakpointObserver ，这是一个基于 Observable 的抽象，位于原生matchMedia函数之上。该帮助器允许您定义一系列媒体查询断点（例如，手机、平板电脑、台式机），以便您的组件能够以清晰、可读的语义适应屏幕尺寸的变化。

table 表格

除了帮助程序和实用程序之外，CDK 还提供基线组件，可以在此基础上构建更多定制体验。 <cdk- table <cdk-table>是一个无主见的、可自定义的数据表，具有完全模板化的 API、动态列和可访问的 DOM 结构。该组件充当核心，任何人都可以在此基础上构建自己的定制数据表体验。

CDK 的下一步

CDK 于 2017 年 12 月发布了第一个稳定版本，但它仍然是一个相对年轻的库，我们对其发展有宏伟的计划。一些主要工作包括：

• 一个全新的<cdk-tree>组件，遵循<cdk-table>建立的模式。
• 一种新的、改进的覆盖层定位策略，支持基于视口大小的灵活调整大小以及将面板保持在屏幕上的强大逻辑。
• 用于拖放交互的实用程序和指令。
• 对话框子包，提供可自定义为任何视觉语言的基线对话框。
• <cdk-svg>作为一种简单而通用的内联 SVG 动画和样式的方法。

如果您对 CDK 的其他添加有好主意，请通过在我们的 GitHub 存储库上提交问题来告知我们。如果您是组件库的作者并且对使用 CDK 感兴趣，请联系devrel@angular.io 。

学习更多

通过使用npm或yarn将@angular/cdk添加到您的项目中来开始使用CDK，然后查看每个CDK行为和组件的文档https://material.angular.io/cdk 。

如果您想了解有关 Angular CDK 的更多信息，请查看以下一些附加资源：

• 我自己在 AngularMIX 的演讲《Angular CDK：组件开发工具包》 （幻灯片）（视频）对 CDK 进行了概述，并进行了从头开始创建颜色选择器组件的现场演示。
• 团队成员crisbeto@在 plunker 中整理了一系列 CDK 示例。
• Thoughtram 的 Dominic Elm 有一篇关于使用 @angular/cdk 创建自定义叠加层的精彩文章。
• Angular 团队成员 Andrew Seguin 和长期贡献者 Erin Coughlan 在 Angular Connect 上发表了演讲，深入探讨了 CDK 数据表的详细信息（幻灯片）（视频），包括现场演示。

文章来源地址：https://blog.angular.dev/a-component-dev-kit-for-angular-9f06e3b4b3b4