0

我正在使用 Angular 的 Drag Drop CDK 在两个列表之间传输项目。我需要的一项特定功能是能够监听组件 API 提供的cdkDrag元素。started Subject但是，在将项目转移到新列表后，我失去了事件侦听器。

此处的示例代码：https ://stackblitz.com/edit/angular-m8lcqp

将元素移动Fall Asleep到完成列表时，我会登录started dragging到控制台。但是，如果您尝试将该元素移回第一个列表，则不会触发该事件。我做错了什么？

要订阅该started事件，我ViewChildren会QueryList使用cdkDrag. 在 中ngAfterViewInit()，我遍历这些拖动元素并订阅started事件：

ngAfterViewInit() {
  this.dragItems.forEach((drag) => {
    drag.started.subscribe((element) => {
      console.log('started dragging');
    })
  })
}

跟踪此事件的正确方法是什么？cdkDrag由于元素现在位于不同的列表中，我是否需要检测页面上的更改然后重新循环并重新订阅？谢谢！

4

1 回答 1

0

恐怕你是对的。将项目从一个列表移到另一个列表后，它会附加到CdkDrag另一个列表的新实例，因此您的订阅将停止接收排放。更糟糕的是，它似乎是内存泄漏的潜在来源，因为订阅从未明确取消。

您最好的方法是直接在可拖动元素上添加一个侦听器：

<div *ngFor="let item of done"
     (cdkDragStarted)="_dragStartedHandler($event)" 
     cdkDrag>{{item}}</div>

_dragStartedHandler(element: CdkDragStart) {
  console.log("started dragging");
}
于 2020-04-13T02:25:37.437 回答