如何使用角CDK拖放角组件？

Question

根据Angular CDK拖放文档，所有可拖放项都应使用迭代数组的*ngFor指令编写。但是，如果我想使可拖放的项目是角度组件呢？什么是使它们可放下的程序？

例如，下面的代码是呈现一个普通的可删除div。如果我想在第二行渲染多个角度组件，该怎么办？在这种情况下，我不能使用*ngFor指令，因为每个角组件都非常不同，我不能将它们保留在任何数组中。

<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
  <div class="example-box" *ngFor="let movie of movies" cdkDrag>{{movie}}</div>
</div>

怎么才能做到像下面这样呢？（以下代码不起作用）

<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
  <widget-temperature cdkDrag></widget-temperature>
  <widget-pressure cdkDrag></widget-pressure>
</div>

我的主要目标是制作一个小部件仪表板，使这些小部件可以拖动和拖放。如果有人知道任何合适的库除了角CDK拖放，可用于角组件，请让我知道。

Answer 1

请尝试使用cdkDropListGroup

<div cdkDropListGroup class="example-list" (cdkDropListDropped)="drop($event)">
<widget-temperature></widget-temperature>
<widget-pressure></widget-pressure>
</div>