组件之间如何使用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

您可以使用字符串代替API documentation中提到的引用：

  

@Input（'cdkDropListConnectedTo'）connectedTo：（CdkDropList |字符串）[]   | CdkDropList |字符串

     

此容器连接到的其他可拖动容器和   容器中的物品可以转移到其中。可以是   对其他放置容器的引用，或它们的唯一ID。

我使用所有可放置元素ID的列表作为示例。

allDropLists = [ 'studentsList', ...this.classRooms
 .map(_ => _.name)];

我将以下内容传递给ClassRoomComponent：

<app-class-room
    *ngFor="let classRoom of classRooms" 
    [classRoom]="classRoom" [allDropLists]="allDropLists">

The complete running example is here.

Answer 2

您还可以将CdkDropListGroup用作父div，任何子元素都将成为该组的一部分，无论它形成多少或在何处形成（ngFor等），然后都可以将div放在CSS的另一侧。如果您要整体动态创建DropList，则很有用

Answer 3

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

“实际传输逻辑”由(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()（如果您不熟悉它，请提供一个小指南）。

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

向父元素添加 cdkDropListGroup 连接所有子元素并允许在它们之间拖动。 here's。

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

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

---

编辑：这是一个包含两个组件的 cdkDropListGroup documentation。