将项目传输到新列表后，Angular CdkDrag 元素丢失事件侦听器

Question

我正在使用 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 元素现在位于不同的列表中？谢谢！

Answer 1

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

最好的办法是直接在可拖动元素上添加监听器：

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

_dragStartedHandler(element: CdkDragStart) {
  console.log("started dragging");
}