angular - 使用不同组件中的列表拖放 - Angular cdk

Question

我有一个使用同一组件中的几个 cdkDropList 元素的示例，但是我重构了代码并注意到将它们移动到不同的组件我的示例停止工作。

如果您尝试将一个元素从“待办事项”列表移动到“完成”列表中，您会看到该列表没有像预期的那样以蓝色边框突出显示。

列表是否需要全部在同一个组件中，即相同的范围？

score 1 · Accepted Answer

1

您可以使用属性 id 和 cdkDropListConnectedTo 链接两个列表

于 2019-09-24T12:09:55.767 回答

score 0 · Accepted Answer

我自己也在解决这个问题，而你的 stackblitz 和 rafi 的评论让我很接近

我玩过你的 stackblitz 并让它工作了！

只是改变：

[cdkDropListConnectedTo]="[todoList]"

至

cdkDropListConnectedTo="todoList"

在两侧，这些支架都需要卸下，并且在两个组件中，它都开始工作了！

感谢你们两个让我足够接近以解决这个问题！

score 0 · Accepted Answer

我没有足够的声誉来评论@okThen 的答案，并想更正它。正确的方法非常接近，但这里有一个工作示例和一些解释：

<component1 [id]="'todoList'" [cdkDropListConnectedTo]="'todoList'">
</component1>

注意''，因为我们为组件提供输入。请参阅我以前的答案以获取更多详细信息。

3 回答 3