我有一个使用同一组件中的多个cdkDropList元素的示例，但是我重构了代码并注意到将它们移动到不同的组件中，我的示例停止工作。
这是一个小演示：https://stackblitz.com/edit/angular-cdk-drag-drop-wkpqst
如果您尝试将元素从"待办事项"列表移动到"完成"中，您可以看到该列表没有像预期的那样用蓝色边框突出显示。
列表是否需要全部位于同一组件中，即相同的范围？
您可以使用属性 id 和 cdkDropListConnectedTo 来链接两个列表
我自己也在解决这个问题，你的堆栈闪电战和拉菲的评论让我很接近
我玩过你的堆栈闪电战并让它工作！
只需更改：
[cdkDropListConnectedTo]="[todoList]"
自
cdkDropListConnectedTo="todoList"
在两侧都需要卸下这些支架，并且在两个组件中，它开始工作！
感谢你们俩让我足够接近解决这个问题！
大PS： 另一个漂亮的解决方案可以在这里找到： Angular CDK 使用 cdkDropListConnectedTo 连接多个放置区
我没有足够的声誉来评论@okThen的答案，并想纠正它。 正确的方法非常接近，但这里有一个工作示例和一些解释：
<component1 [id]="'todoList'" [cdkDropListConnectedTo]="'todoList'">
</component1>
请注意''，因为我们为组件提供输入。 有关更多详细信息，请参阅我之前的回答。