如何将 Angular CDK Drag Drop 用于 Angular 组件？答案

【问题标题】：How to use Angular CDK Drag Drop for angular components?如何将 Angular CDK Drag Drop 用于 Angular 组件？
【发布时间】：2020-03-14 14:05:55
【问题描述】：

根据 Angular CDK Drag Drop Documentation，所有可放置的项目都应使用 *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>

我的主要目标是制作一个小部件仪表板，小部件可拖放。如果有人知道除了 Angular CDK Drag Drop 之外的任何合适的库，可以用于 Angular 组件，请告诉我。

【问题讨论】：

你不能包装组件或传递一个变量给它们，打开或关闭组件内部的 cdkDrag 吗？我不知道理想的解决方案是什么样的，但我想到了这一点..
你说的是动态组件渲染吗？
不，先生，我不是。

标签： angular drag-and-drop angular-material angular7 angular8

【解决方案1】：

试试这个cdkDropListGroup

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

【讨论】：