前言
Angular CDK（Component Dev Kit）是 Angular 官方提供的一组工具，包含了一些常用的组件、指令和工具类，它们能在 Angular 应用的开发中提高我们的效率，使得我们能更加专注于业务开发。
本文将会介绍 Angular CDK 的用法和一些实例场景。
CDK 的一些特性
指令
CDK 中包含了一些有用的指令，如 CdkDrag 和 CdkDropList，可以方便地实现基于拖拽的 UI 交互，类似于 Pinterest 瀑布流效果等。CdkDrag 是一个可以被拖拽的元素，CdkDropList 是一个用来接收 CdkDrag 置入其中的容器。
<div cdkDropList (cdkDropListDropped)="onDrop($event)"> <div cdkDrag>Coffee</div> <div cdkDrag>Tea</div> <div cdkDrag>Milk</div> </div>
在代码中，我们可以使用 cdkDropList 创建一个可放置元素的容器，当拖拽结束后，会触发 cdkDropListDropped 事件，我们只需要在事件中处理相应的逻辑即可。
工具类
CDK 中还提供了一些便捷的工具类，如 LayoutModule，可以帮助我们快速地实现复杂的布局，如左侧菜单 + 右侧内容的布局。
-- -------------------- ---- -------
---- -------------
---- ------------ ----------------
---- -----------------------
---- ------------------------
---- --------------------------
------
---- ----------------
-------------------------------
------
------在代码中，我们使用了 cdkLayout 指令，并传入了 row 参数来实现水平布局。这样，我们就可以在容器中方便地布局子元素了。
组件
CDK 还提供了一些实用的组件，如 CdkStepper，可以方便地创建一个多步骤的表单流程，如预约流程等。
-- -------------------- ---- -------
------------------------
--------- ----------- ---
------- -
-----------
--------- ----------- ---
------- -
-----------
--------- ----------- ---
------- -
-----------
-------------------------在代码中，我们使用了 mat-horizontal-stepper 组件，它会自动根据子元素数量生成相应的步骤。我们只需要在 mat-step 组件中填写相应的内容即可。
CDK 的实战应用
动态表单
在前端开发中，表单是使用频率非常高的一个组件，而有时候，我们需要实现一些比较复杂的表单，比如表单项需要根据数据动态生成，或者表单需要有多个步骤。
这是，我们可以使用 CDK 中的 CdkStepper 和 CdkTable 等组件，来轻松地实现复杂的表单。
-- -------------------- ---- -------
------------
--------- ---------------
------------ ----------------------
--
------ ----- -------------------- -
--------------------- -------- -----------
----- - -
- --- -- ------ -------- ----- -------- ------ -------- --
- --- -- ------ -------- ----- ------------- ------ --- ------ --
- --- -- ------ -------- ----- ----------- ------ ---- --
- --- -- ------ -------- ----- -------- ------ -------- --
--
---- - ---
----------------- -
--------------------------------- - ------
-
---------- -
--------------------- -----------
-
------------- -
----- -- - ----------------- - --
----------------- --- ------ ------------ ----- -------- ------ -- ---
-
-在代码中，我们使用了 CdkStepper 组件来实现表单流程，使用 CdkTable 组件来动态生成表单项。在 addFormItem 方法中，我们可以动态添加表单项，再次在 onSubmit 方法中，我们可以获取到表单项的值。
树形菜单
在系统开发中，树形菜单是一个常见的 UI 组件，CDK 中提供了一些指令和组件，可以方便地实现树形菜单。
-- -------------------- ---- -------
--------- ------------------------- ----------------------------
-------------- -------------------- ----- ------------------
--- ----------------------
------- --------------- ------------------
-------------
-----
----------------
--------------------- -------------------- ----- ----- --------- ------------------------------
----
---- ----------------------
------- --------------- ------------------
--------- ----------------------------
------------------------------ - ------------- - -----------------
-----------
---------
-------------
------
--- ---------------------------------------------------------------
------------- ---------------------------------
-----
-----
-----------------------
-----------
在代码中，我们使用了 mat-tree 和 mat-nested-tree-node 组件，通过传入节点和子节点的信息，就能快速地生成树形菜单。
总结
Angular CDK 是一个非常实用的工具集，其中包含了许多常见的组件、指令和工具类，能够有效提升我们开发的效率。同时，CDK 在学习起来也并不复杂，只需要多尝试，多实践就可以使用起来了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6497b18a48841e98944b7561