如何為 angular 組件使用 Angular CDK 拖放？

Question

根據 Angular CDK Drag Drop Documentation ，所有可放置的項目都應使用*ngFor指令迭代數組來編寫。 但是，如果我想要放置的項目是 angular 組件怎么辦？ 使它們可丟棄的程序是什么？

例如，下面的代碼是渲染一個普通的可放置 div。 如果我想在第二行渲染多個 angular 組件怎么辦。 在這種情況下，我不能使用*ngFor指令，因為每個 angular 組件都非常不同，我不能將它們保存在任何數組中。

<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>

我的主要目標是制作一個小部件儀表板，這些小部件是可拖放的。 如果有人知道除 Angular CDK 拖放之外的任何合適的庫，可用於 angular 組件，請告訴我。

Answer 1

試試這種方式cdkDropListGroup

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