我有一个使用相同组件中的几个cdkDropList元素的示例，但是我重构了代码，并注意到将其移动到示例中的其他组件会停止工作。
这是一个小演示：https://stackblitz.com/edit/angular-cdk-drag-drop-wkpqst
如果您尝试将元素从“待办事项”列表移至“完成”，则可以看到该列表未像预期的那样以蓝色边框突出显示。
列表是否必须全部在同一组件中，即同一作用域？
答案 0 :(得分：1)
您可以使用属性id和cdkDropListConnectedTo链接两个列表
答案 1 :(得分：0)
我自己也在解决这个问题，你的 stackblitz 和 rafi 的评论让我很接近
我玩过你的 stackblitz 并且成功了！
只是改变：
[cdkDropListConnectedTo]="[todoList]"
到
cdkDropListConnectedTo="todoList"
需要移除两侧的这些支架，并且在两个组件中都可以开始工作了！
感谢你们让我足够接近解决这个问题！
重点： 另一个很棒的解决方案可以在这里找到： Angular CDK connecting multiple drop zones with cdkDropListConnectedTo
答案 2 :(得分：0)
我没有足够的声誉来评论@okThen 的答案，我想更正它。 正确的方法非常接近，但这里有一个 working example 和一些解释：
<component1 [id]="'todoList'" [cdkDropListConnectedTo]="'todoList'">
</component1>
注意 ''，因为我们为组件提供输入。
有关详细信息，请参阅我的 previous answer。