在两个组件之间连接元素引用

Question

我正在尝试将大型组件拆分为较小的组件。我已经在Angular Material中实现了拖放功能，该功能通过哈希标记连接两个列表。 问题在于，现在可以拖动的列表和可以放置项目的列表是分开的，因为每个组件都位于不同的组件中。我的问题是如何连接这两个列表以再次获得功能？我不是在问任何代码实现，而只是在将值传递给这两个组件之间的哈希元素引用。

代码： 子组件1（[cdkDropListConnectedTo] =“ [doneList]”）：

    <div class="msgList"
    cdkDropList #todoList="cdkDropList" [cdkDropListData]="messagesArray" [cdkDropListConnectedTo]="[doneList]"
    infiniteScroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="50"(scrolled)="onScroll()" [scrollWindow]="false">

子组件2（[cdkDropListConnectedTo] =“ [todoList]”）：

     <a mat-list-item class="navItem" (click)="onContainerChange(enumMessageContainer.DELETED_MESSAGES)"
           cdkDropList #doneList="cdkDropList"
           [cdkDropListData]="messagesMovedToDelete" [cdkDropListConnectedTo]="[todoList]"
           (cdkDropListDropped)="dropAndDelete($event)">
            <mat-icon>delete</mat-icon>
            <span class="nav-caption">Trash</span>
        </a>