Angular CDK拖拽组件拖拽时文本变更后未渲染问题排查

问题根源 #

你遇到的核心问题是：Angular CDK的拖拽功能在启动时，会创建一个拖拽元素的快照副本放到悬浮的预览层（overlay）里，而非直接移动原组件。当你在cdkDragStarted这类拖拽事件里修改dragText时，原组件的数据源确实更新了，但用户看到的预览层是拖拽启动那一刻的静态快照，不会同步后续的数据变化，所以看起来组件没重新渲染。

而你用mousedown事件修改文本能生效，是因为这个事件触发在拖拽快照生成之前，修改后的文本会被包含到快照里，所以预览层能显示更新后的内容。

解决办法 #

推荐用官方提供的previewTemplate自定义拖拽预览模板，让预览内容和原组件绑定相同的数据，这样数据变更时预览层也会同步更新：

1. 在你的item组件里定义一个模板作为拖拽预览：

<ng-template #dragPreview>
  <div class="item">{{ dragText }}</div>
</ng-template>

2. 在cdkDrag指令上绑定这个模板：

<div cdkDrag [cdkDragPreviewTemplate]="dragPreview">
  <!-- 原组件内容 -->
</div>

3. 现在在拖拽事件中修改dragText时，自定义的预览模板会因为数据绑定自动更新，用户就能看到同步的文本变化了。

另外，也可以通过cdkDragStarted事件触发时手动更新预览层的内容，但自定义预览模板是更简洁且符合官方设计的方案。

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