PrimeNG：不同组件间Tree组件的Drag & Drop功能异常问题

我之前也碰到过一模一样的问题，核心原因是TreeDragDropService的实例隔离导致跨组件的拖放事件无法正常传递。下面给你详细分析问题根源和解决步骤：

问题根源 #

当两个Tree组件在同一个组件中时，它们共享同一个TreeDragDropService实例（因为你在该组件的providers里声明了这个服务），这个服务负责在拖放过程中协调事件的监听与传递。但当你把第二个Tree拆分成独立组件后，如果这个新组件也在自己的providers里添加了TreeDragDropService，就会创建一个全新的服务实例——两个Tree用的不是同一个服务，自然无法触发跨组件的onNodeDrop事件。

解决方案 #

1. 统一TreeDragDropService的实例 #

把TreeDragDropService的提供范围提升到父组件或模块级别，确保两个Tree共享同一个服务实例：

• 在你的NavigatorComponent中保留providers: [TreeDragDropService]（或者直接把它移到AppModule的providers数组里，这样整个应用的Tree组件都能共享）；
• 在新拆分的目标Tree组件中，完全移除providers数组中的TreeDragDropService配置，避免创建独立实例。

示例：拆分后的目标Tree组件代码

@Component({
  selector: 'app-destination-tree',
  templateUrl: './destination-tree.component.html',
  styleUrls: ['./destination-tree.component.css']
  // 这里不要添加providers: [TreeDragDropService]
})
export class DestinationTreeComponent {
  destnodes: TreeNode[];

  onNodeDrop(event) {
    console.log("Drop");
    console.log(event);
  }
}

2. 确认拖放Scope配置正确 #

确保两个Tree的draggableScope和droppableScope依然保持对应关系：

• 源Tree（Navigator中的）：draggableScope="contents"，droppableScope="navigator"；
• 目标Tree（拆分后的组件）：draggableScope="navigator"，droppableScope="contents"。

你原来的配置是正确的，拆分后注意不要误改即可。

3. 检查validateDrop逻辑 #

如果目标Tree设置了[validateDrop]="true"（你原来的代码是这样），没问题；但如果后来改成了自定义的验证函数，一定要确保符合拖放条件时返回true——如果验证返回false，onNodeDrop是不会被触发的。

验证调整 #

做完以上修改后，重新运行项目，跨组件的拖放应该就能正常触发onNodeDrop事件了。

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