angular - 如何在组件之间使用 Angular 7 cdkDropList？

Question

我在屏幕左侧的 mat-list 组件中有一个项目(学生)列表(一般列表)。我的屏幕右侧还有一个教室组件列表。 在每个教室组件中，都有一份学生名单。

我希望能够使用新的 Drag&Drop API of angular material 将学生从通用列表拖到包含在任何教室组件内的学生列表之一。

伪代码如下所示:

<mat-list #studentsList="cdkDropList" cdkDropList [cdkDropListData]="students">
  <mat-list-item cdkDrag *ngFor="let student of studentes">
    {{student.name}}
  </mat-list-item>
</mat-list>

<div class="right-panel>
  <app-class-room *ngFor="let cr of classRooms" [classRoom]="cr"></app-class-room>
</div>

显然，我不能在通用列表上使用 [cdkDropListConnectedTo] 输入，因为我无权访问类组件内的学生列表。我应该如何进行？

Answer 1

我想扩展之前的答案，因为我找不到适合我的场景的工作示例。 请注意，我简化了这个示例以强调重要的部分(连接所需的列表)。

“实际传输逻辑”是通过(cdkDropListDropped)="onDrop($event)"实现的。 真的有basic example

1。通过 cdkDropListConnectedTo 连接不同组件中的特定 cdkDropLists

有时我们不想连接所有子组件，而只想连接某些子组件。 为此，我们将使用 cdkDropListConnectedTo，但我们必须为每个 cdkDropList 提供一个唯一的 ID。问题是它不是通常的 HTML id。

错误的方式

<component1 id="component1" cdkDropList> // <- NO!

我们会收到这种错误

CdkDropList could not find connected drop list with id component1

正确的方式

documentation说明 cdkDropList 有一个专用的 @Input() 属性用于 id。 因此连接列表的正确方法是:

<component1 [id]="'component1'" [cdkDropListConnectedTo]="'component2'" cdkDropList></...>
<component2 [id]="'component2'" cdkDropList></...>
<component3 [id]="'component3'" cdkDropList></...>

您现在只能从 component1 拖动到 component2。

请注意，此示例中的 id 是一个字符串。 我们必须将字符串包装在 ' ' 中以将它们传递给 @Input()(here's 一个小指南，以防您不熟悉它)。

2。使用 cdkDropListGroup 指令连接所有 cdkDropLists

将 cdkDropListGroup 添加到父元素可连接所有子元素并允许在它们之间拖动。 cdkDropListGroup documentation .

<section cdkDropListGroup>
    <component1 cdkDropList></component1>
    <component2 cdkDropList></component2>
    <component3 cdkDropList></component3>
</section>

每个项目都可以在组件 1、2 和 3 之间转移。

---

编辑:这是一个working example有两个组件。