如何在3个组件（1个父级组件和2个子级组件）之间实现拖放

Question

我确实通过角度拖放实现了拖放功能。

但是如何在3个组件之间实现它。

我像这样创建了一个父组件：

<div class="zone-vehicle-overview">
      <app-vehicle-overview [vehicleOverviewData]="vehicleOverviewData" [allDropLists]="allDropLists"
        (cdkDropListDropped)="drop($event)"></app-vehicle-overview>
    </div>
    <div class="zone-company-overview">
      <app-company-overview [companyOverviewData]="companyOverviewData" [allDropLists]="allDropLists"
        (cdkDropListDropped)="drop($event)"></app-company-overview>
    </div>

此组件有2个子组件

车辆概述组件：

<div cdkDropList id="vehicleOverview" [cdkDropListData]="vehicleOverviewData" class="vehicle-overview"
  [cdkDropListConnectedTo]="allDropLists" (cdkDropListDropped)="drop($event)">
  <div cdkDrag>
    <div *ngFor="let item of vehicleOverviewData">{{item}}</div>
  </div>
</div>

其ts文件为：

export class VehicleOverviewComponent implements OnInit {
  @Input() vehicleOverviewData;
  @Input() allDropLists;
  @Input() cdkDropListDropped;
  constructor() { }

  ngOnInit() {
  }

  drop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      transferArrayItem(event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex);
    }
  }

}

和其他子组件与此组件相同。

现在我想将列表从一个子组件拖放到另一个子组件。

但是它不起作用...

有什么想法吗？

最诚挚的问候，

狮子座