Angular 17：使用Cdk Drag实现调整器遇异常求助

核心问题定位 #

你遇到的尺寸指数变化，大概率是拖拽时的尺寸计算逻辑错误：每次拖拽都基于当前已更新的尺寸叠加偏移量，而非基于拖拽开始时的初始尺寸计算相对偏移。比如第一次拖拽加10，第二次又在新尺寸基础上加10，反复叠加就会出现指数增长的失控效果。

结合Signal的修正方案 #

用Signal做状态管理时，要确保尺寸更新是基于拖拽初始基准值+鼠标偏移，而非依赖Signal当前值累加：

1. 拖拽开始时锁定初始状态
   在cdkDragStarted事件中，记录拖拽前的初始尺寸和鼠标位置：

   import { signal } from '@angular/core';
   import { CdkDragStart, CdkDragMove } from '@angular/cdk/drag-drop';
   
   // 用Signal存储目标元素尺寸
   const targetWidth = signal(400);
   // 拖拽初始状态变量
   private initialWidth: number;
   private initialMouseX: number;
   
   onDragStart(event: CdkDragStart) {
     this.initialWidth = this.targetWidth();
     this.initialMouseX = event.pointerPosition.x;
   }
   

2. 拖拽过程中基于初始值计算新尺寸
   在cdkDragMoved事件中，用鼠标的相对偏移量直接计算新尺寸，避免累加：

   onDragMove(event: CdkDragMove) {
     const offsetX = event.pointerPosition.x - this.initialMouseX;
     // 直接基于初始宽度更新，而非targetWidth() + offsetX
     this.targetWidth.set(this.initialWidth + offsetX);
   }
   

异步更新时的组件刷新处理 #

如果存在异步操作（比如接口请求后更新组件），要避免组件刷新导致拖拽状态丢失或错位：

• 用effect监听异步数据的变化，重置尺寸Signal的初始值：

  import { effect } from '@angular/core';
  
  // 假设asyncData是异步获取的组件配置
  effect(() => {
    if (this.asyncData()) {
      this.targetWidth.set(this.asyncData().initialWidth);
    }
  });
  

• 组件刷新时，确保拖拽的初始状态变量（initialWidth、initialMouseX）在每次拖拽开始时重新赋值，不要依赖组件初始化时的旧值。

额外注意事项 #

• 确保拖拽手柄的位置正确：如果调整器是元素的边缘手柄，要计算鼠标相对于手柄的初始偏移，避免因为元素位置变化导致偏移计算错误。
• 可以添加尺寸边界限制（比如最小宽度、最大宽度），防止尺寸超出合理范围：

  const newWidth = Math.max(200, Math.min(800, this.initialWidth + offsetX));
  this.targetWidth.set(newWidth);
  

内容的提问来源于stack exchange，提问作者Lorenzo