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

Posted 2023-05-08

【中文标题】如何在组件之间使用 Angular 7 cdkDropList？

【英文标题】：How to use Angular 7 cdkDropList between components?

【发布时间】：2019-04-03 11:52:28

【问题描述】：

我在屏幕左侧的 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] 输入，因为我无法访问课堂组件中的学生列表。我应该如何进行？

【参考方案1】：

您可以使用字符串而不是 API documentation 中提到的引用：

@Input('cdkDropListConnectedTo') connectedTo: (CdkDropList | string)[] | 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.

【参考方案2】：

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

“实际传输逻辑”由(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() 的@Input() 属性id。 因此连接列表的正确方法：

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

您现在只能从组件 1 拖动到组件 2。

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

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

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

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

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

---

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

【讨论】：

cdkDropLists --> cdkDropList

【参考方案3】：

您也可以使用 CdkDropListGroup 作为父 div，任何子元素都将成为该组的一部分，无论它有多少或在哪里形成（ngFor 等），然后您可以将 div 放在一个使用 CSS 的视图的另一侧。如果您要动态创建 DropLists 会很有帮助

【讨论】：

我在 CdkDropListGroup 上找不到任何信息。它似乎也没有在文档中。

material.angular.io/cdk/drag-drop/api#CdkDropListGroupblog.angularindepth.com/…appdividend.com/2018/12/22/…