1. 起源
CDK是Component Dev kit的简称,首次提出是在2017年(PS:2017.07推出了可用的Beta版本),是Angular Material团队在开发Library时发现组件有很多相似的地方,最后进行了抽取,提炼出了公共的逻辑,这部分即是CDK,具体可以观看[2017年Angular Mix大会上的Jeremy Elbourn的介绍。
官方用了一个很形象的比喻:
if the component library is a rocket ship, the cdk is the box of engine parts.
,如果组件库是火箭飞船,
那么CDK就是发动机零件盒。
2. 分类
Common Behaviors
Accessibility
包提供了许多提高无障碍性(可访问性)的工具,最终让屏幕阅读更容易理解。
Bidirectionality
包为组件提供了一个通用的体系,来获取和响应应用的 LTR(从左到右)/RTL(从右到左)布局方向的变化。
Clipboard
提供用于使用系统剪贴板的帮助器。
3. Accessibility
1. FocusTrap
FocusTrap是一个指令,它用于捕获元素中的Tab键焦点,常用于我们的表单里,可能说的比较模式,可以直接看下图的演示效果。
从视频演示中我们可以看到,使用指令包裹元素和不包裹元素,按下Tab键之后的效果是不同的。HTML其实很简单,如下:
如果你想自己控制指令的作用范围,那么CDK还提供另外的三个指令:cdkFocusRegionStart
、cdkFocusRegionEnd
和cdkFocusInitial
,其中cdkFocusInitial
用于指定初始化时获取焦点的元素或者区域。tab键会在该区域内自动回卷。
2. ListKeyManager
ListKeyManager可以通过键盘交互来管理条目列表。要使用ListKeyManager一般需要做三件事儿。
- 为管理的条目创建一个
@ViewChildren
查询 - 初始化
ListKeyManager
,并传入条目 - 将键盘事件转发给
ListKeyManager
原则上应该实现ListKeyManagerOption
接口(可选),ListKeyManagerOption
里有一个可选方法和可选属性。
但是必须实现FocusableOption
接口。