Angular 的 CDK（Component Dev Kit）是一个强大的工具库，可以让开发者创建高质量的组件和界面。使用 CDK，我们可以轻松地实现自定义的滚动条、可拖拽的元素、对话框等功能。在本文中，我们将分享在 Angular 应用中使用 CDK 的最佳实践。
安装 CDK
要使用 CDK，我们需要先安装它。可以通过 npm 命令在项目中添加 CDK：
--- ------- ------------
接下来，在 app.module.ts 文件中导入 CDK 相关的模块：
------ - --------------- - ---- ------------------------- ------ - -------------- - ---- ------------------------- ------ - ------------- - ---- -----------------------
使用 CDK ScrollingModule
CDK ScrollingModule 提供了一些有用的指令，用于处理滚动条和可见性方面的问题。以下是几个使用 CDK ScrollingModule 的场景和最佳实践。
1. 实现无限滚动列表
在很多应用中，我们需要实现一个无限滚动列表。这时可以使用 CDK ScrollingModule 中的 VirtualScroller 指令，它可以实现在列表非常长的情况下仅呈现当前可见的项目。
---------------------------- ------------- -------------
---- ------------------- ---- -- -------
-- ---- --
------
------------------------------这里，我们将 cdk-virtual-scroll-viewport 指令应用于一个包含多个 <div> 元素的父元素上，通过 cdkVirtualFor 指令循环遍历并呈现多个子元素。itemSize 表示每个子元素的高度，滚动条会根据这个高度来调整。
2. 监听滚动事件
有时，我们需要在滚动条滚动时执行某些操作。CDK ScrollingModule 中的 CdkScrollable 指令提供了一个 scrolled 事件，我们可以监听它来执行我们的代码。
---- ----------------- ------------- ------------------------------ --- ------
这里，我们将 cdkScrollable 指令应用于一个容器元素上，当用户滚动时，onScroll 方法就会被调用：
--------------- -------------- - ----- --------- - ---------------------------------------------- ----------------------- -- ----------- -
3. 处理虚拟滚动中的嵌套组件
如果在虚拟滚动列表中嵌套了其他组件，可能会遇到滚动条不正常工作的问题。解决这个问题的一个方法是在父组件上应用 CdkFixedSizeVirtualScrollViewport 指令，并指定一个固定的高度。
--------------------------------------- ------------- ------------ -------------- -------- --------- ------------------- ---- -- ------ -------------- ----------- -----------------------------------------
这里，我们将 cdk-fixed-size-virtual-scroll-viewport 指令应用于一个包含多个 app-item 组件的父元素上，并设置了一个固定的高度。
使用 CDK DragDropModule
CDK DragDropModule 提供了一个可拖拽的元素系统，方便用户通过拖拽交互来完成一些操作。以下是几个使用 CDK DragDropModule 的场景和最佳实践。
1. 实现拖拽排序列表
在许多应用中，我们希望用户能够通过拖拽来修改列表的顺序，CDK DragDropModule 可以非常容易地实现这个功能。
--- ----------- ------------------------------------ --- ----------- ---- -- ------ ---------- ---- ------- -----
这里，我们将 cdkDropList 指令应用于一个 ul 元素上，并将 cdkDrag 指令应用于每个 li 元素上。在 cdkDropListDropped 事件中，我们可以获取到被拖拽的元素和目标位置，并将它们重新排序。
----------- ---------------------- - --------------------------- -------------------- -------------------- -
2. 实现拖放操作
对于一些需要交互的元素，我们可能希望用户可以通过拖拽来移动它们，比如在电商网站中，用户可以通过拖拽将商品添加到购物车中。
---- ------- ----------------------------------- --- ------
这里，我们将 cdkDrag 指令应用于需要拖拽的元素上，并将 cdkDragEnded 事件监听器绑定到它上，以执行一些额外的操作（比如将元素添加到其他容器中）。
3. 自定义拖拽跟随效果
CDK DragDropModule 默认提供了一些基础的拖拽跟随效果，但是可能不太满足一些特定场景的需求。在这种情况下，我们可以通过自定义一个 DragPreview 来实现自己的拖拽跟随效果。
---- -------
------------------------------------
----------------------------
---------------------------------------
---
------
------------ -----------
---- ----------------
---
------
--------------这里，在需要拖动的元素上应用 cdkDrag 指令，并在 cdkDragPreviewTemplate 中指定一个自定义的 ng-template，作为拖拽开始时的跟随元素。
使用 CDK OverlayModule
CDK OverlayModule 可以快速创建弹出框、下拉框等浮动样式的界面组件，以下是几个使用 CDK OverlayModule 的场景和最佳实践。
1. 实现浮动菜单
在很多应用中，我们会需要一个浮动菜单，它会在鼠标点击或悬停时弹出。可以使用 CDK OverlayModule 中的 CdkOverlay、CdkOverlayOrigin 和 CdkOverlayPosition 指令来创建这样的菜单。
------- -------------------------------
-------------------------
--------------------------
---- ----
---------
------------ --------------- -------- ------------------------------
----
--- ----------- ---- -- ------ ------------------------- ---- -------
-----
--------------这里，我们使用一个 button 元素作为菜单的触发器，并定义了 mouseenter 和 mouseleave 事件，用来触发菜单的显示和隐藏。 cdkOverlayPanel 指令指定了一个弹出层，包含一个带有多个 li 元素的列表。
---------- -
------------ - ---------------------
------------ -----
-------------- ----------------------------
----------------- -----------------------
-------------------------------------------------
----------------
- -------- -------- -------- --------- --------- -------- --------- ----- -
--
---
---------------------------------
-这里，我们在 showMenu 方法中调用 overlay.create 方法来创建一个浮动菜单。其中包括 hasBackdrop、backdropClass 和 positionStrategy 等选项。
2. 实现模态对话框
在一些情况下，我们需要展示一个模态对话框，防止用户在关闭对话框之前与其它部分进行交互。可以使用 CDK OverlayModule 中的 CdkOverlay 和 TemplatePortal 指令来实现一个简单的模态对话框。
------- --------------------------- ---------------
------------ --------------
---- ---------------
---------- ----------
--------- -----------
------- --------------------------------------
------
--------------这里，我们定义了一个 button 元素作为打开对话框的触发器，并定义了一个 ng-template 作为对话框的内容。
------------ -
----- --------- - ---------------------
------------ -----
-------------- ----------------------------
----------------- -------------------------------------------------------------------------
--------------- --------------------------------------
----------- ------------------ ---------------
---
-------------------- --------------------------------- ------------------------
-------------------------------------- -- --------------------
-这里，我们在 showDialog 方法中使用 overlay.create 方法创建一个模态对话框，并使用 TemplatePortal 将 ng-template 显示在对话框中。通过 backdropClick 方法监听对话框外部的点击事件，当用户点击对话框外部时，对话框会被关闭。
结论
使用 Angular 的 CDK，可以轻松地创建复杂的交互组件和界面效果。在本文中，我们已经介绍了如何使用 CDK ScrollingModule、CDK DragDropModule 和 CDK OverlayModule 来实现一些常用的交互功能。掌握这些最佳实践会帮助我们更好地设计和开发 Angular 应用。
如果你感兴趣，可以参考这里的示例代码来更好地理解本文所介绍的内容。希望这篇文章能够对你有所帮助，让你在使用 Angular CDK 时能够更加得心应手！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670b2181d91dce0dc887ae7c