在 Angular 应用中使用 CDK 的最佳实践-JavaScript中文网-JavaScript教程资源分享门户

Angular 的 CDK（Component Dev Kit）是一个强大的工具库，可以让开发者创建高质量的组件和界面。使用 CDK，我们可以轻松地实现自定义的滚动条、可拖拽的元素、对话框等功能。在本文中，我们将分享在 Angular 应用中使用 CDK 的最佳实践。

安装 CDK

要使用 CDK，我们需要先安装它。可以通过 npm 命令在项目中添加 CDK：

npm install @angular/cdk

接下来，在 app.module.ts 文件中导入 CDK 相关的模块：

import { ScrollingModule } from '@angular/cdk/scrolling';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { OverlayModule } from '@angular/cdk/overlay';

使用 CDK ScrollingModule

CDK ScrollingModule 提供了一些有用的指令，用于处理滚动条和可见性方面的问题。以下是几个使用 CDK ScrollingModule 的场景和最佳实践。

1. 实现无限滚动列表

在很多应用中，我们需要实现一个无限滚动列表。这时可以使用 CDK ScrollingModule 中的 VirtualScroller 指令，它可以实现在列表非常长的情况下仅呈现当前可见的项目。

<cdk-virtual-scroll-viewport itemSize="50" class="list">
  <div *cdkVirtualFor="let item of items">
    {{ item }}
  </div>
</cdk-virtual-scroll-viewport>

这里，我们将 cdk-virtual-scroll-viewport 指令应用于一个包含多个 <div> 元素的父元素上，通过 cdkVirtualFor 指令循环遍历并呈现多个子元素。itemSize 表示每个子元素的高度，滚动条会根据这个高度来调整。

2. 监听滚动事件

有时，我们需要在滚动条滚动时执行某些操作。CDK ScrollingModule 中的 CdkScrollable 指令提供了一个 scrolled 事件，我们可以监听它来执行我们的代码。

<div class="container" cdkScrollable (scrolled)="onScroll($event)">
  ...
</div>

这里，我们将 cdkScrollable 指令应用于一个容器元素上，当用户滚动时，onScroll 方法就会被调用：

onScroll(event: CdkScrollable) {
  const scrollTop = event.getElementRef().nativeElement.scrollTop;
  console.log('scrollTop: ', scrollTop);
}

3. 处理虚拟滚动中的嵌套组件

如果在虚拟滚动列表中嵌套了其他组件，可能会遇到滚动条不正常工作的问题。解决这个问题的一个方法是在父组件上应用 CdkFixedSizeVirtualScrollViewport 指令，并指定一个固定的高度。

<cdk-fixed-size-virtual-scroll-viewport itemSize="50" class="list" style="height: 500px;">
  <app-item *cdkVirtualFor="let item of items" [item]="item">
  </app-item>
</cdk-fixed-size-virtual-scroll-viewport>

这里，我们将 cdk-fixed-size-virtual-scroll-viewport 指令应用于一个包含多个 app-item 组件的父元素上，并设置了一个固定的高度。

使用 CDK DragDropModule

CDK DragDropModule 提供了一个可拖拽的元素系统，方便用户通过拖拽交互来完成一些操作。以下是几个使用 CDK DragDropModule 的场景和最佳实践。

1. 实现拖拽排序列表

在许多应用中，我们希望用户能够通过拖拽来修改列表的顺序，CDK DragDropModule 可以非常容易地实现这个功能。

<ul cdkDropList (cdkDropListDropped)="drop($event)">
  <li *ngFor="let item of items" cdkDrag>{{ item }}</li> 
</ul>

这里，我们将 cdkDropList 指令应用于一个 ul 元素上，并将 cdkDrag 指令应用于每个 li 元素上。在 cdkDropListDropped 事件中，我们可以获取到被拖拽的元素和目标位置，并将它们重新排序。

drop(event: CdkDragDrop<string[]>) {
  moveItemInArray(this.items, event.previousIndex, event.currentIndex);
}

2. 实现拖放操作

对于一些需要交互的元素，我们可能希望用户可以通过拖拽来移动它们，比如在电商网站中，用户可以通过拖拽将商品添加到购物车中。

<div cdkDrag (cdkDragEnded)="dragEnded($event)">
  ...
</div>

这里，我们将 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