单独组件中的 CDK DropLists答案

【问题标题】：CDK DropLists in separate components单独组件中的 CDK DropLists
【发布时间】：2019-01-18 00:23:52
【问题描述】：

我是 Angular 的新手。我想在我的 Angular 6 应用程序中实现拖放功能。我遇到了一个非常好的库“CDK”。

我已经成功实现了在两个列表之间传输项目的功能。两个列表都在同一个组件中。

现在我正在努力分离列表组件。我已将 droplist1 放在 list-a-component.html 中，并将其 items 数组放在 list-a-component.html 中。对于 droplist2 也是如此。

但它不起作用。我可以移动列表中的项目，但不能从一个转移到另一个。

调查发现，当 html 为两个列表呈现时，html 缺少“ng-reflect-connected-to”值。它为空。

<div _ngcontent-c1="" cdkdroplist="" class="example-list cdk-drop-list" ng-reflect-connected-to="" ng-reflect-data="Get to work,Pick up groceries," id="cdk-drop-list-2">

【问题讨论】：

标签： angular angular-cdk

【解决方案1】：

如果 droplist(Drop Zone) 位于不同的组件中，则它不是直截了当的。为了让它工作，我们需要在源组件和目标组件中创建下拉列表，并使用 cdkDropListConnectedTo 连接两个下拉列表。

拖动源组件.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-drag-source',
  templateUrl: './drag-source.component.html',
  styleUrls: ['./drag-source.component.css']
})
export class DragSourceComponent implements OnInit {
  data = [
    "apple",
    "boy",
    "cat",
    "dog",
    "elephant"
  ]
  constructor() { }

  ngOnInit() {
  }

}

.example-list {
  width: 500px;
  max-width: 100%;
  border: solid 1px #ccc;
  min-height: 60px;
  display: block;
  background: white;
  border-radius: 4px;
  overflow: hidden;
}

<p>
Drag Source 
</p>

<div id="source" cdkDropList [cdkDropListConnectedTo]="['destination']" class="example-list">
  <ul>
    <li cdkDrag [cdkDragData]="item" *ngFor="let item of data">
      {{ item }}
    </li>
  </ul>
</div>

drop-destination-componet.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-drop-destination',
  templateUrl: './drop-destination.component.html',
  styleUrls: ['./drop-destination.component.css']
})
export class DropDestinationComponent implements OnInit {
  data = []
  constructor() { }

  ngOnInit() {
  }

  drop(event) {
    this.data.push(event.item.data);
  }

}

.example-list {
  width: 500px;
  max-width: 100%;
  border: solid 1px #ccc;
  min-height: 60px;
  display: block;
  background: white;
  border-radius: 4px;
  overflow: hidden;
}

<p>
Destination Drop Zone
</p>

<div id="destination" class="example-list" style="height: 200px; border: 2px solid black" cdkDropList [cdkDropListConnectedTo]="['source']" (cdkDropListDropped)="drop($event)">
    <ul>
    <li *ngFor="let item of data">
      {{ item }}
    </li>
  </ul>
</div>

要查看完整的解决方案，请访问stackblitz

【讨论】：