在将项目转移到新列表后，角CdkDrag元素将丢失事件侦听器
在将项目转移到新列表后，角CdkDrag元素将丢失事件侦听器
提问于 2020-04-13 00:53:39
我使用角的拖放CDK在两个列表之间传递项目。我需要的一个特定功能是能够侦听组件API提供的cdkDrag元素的started Subject。但是，在将项转移到新列表后，将失去事件侦听器。
这里的示例代码：https://stackblitz.com/edit/angular-m8lcqp
当将诸如Fall Asleep这样的元素移动到Done列表时，我将started dragging日志记录到控制台。但是，如果尝试将该元素移回第一个列表，则不会触发该事件。我做错什么了？
要订阅started事件，我使用ViewChildren获取QueryList of cdkDrag。在ngAfterViewInit()中，我循环这些拖动元素并订阅started事件：
ngAfterViewInit() {
this.dragItems.forEach((drag) => {
drag.started.subscribe((element) => {
console.log('started dragging');
})
})
}追踪这个事件的正确方法是什么？我是否需要检测页面上的更改，然后重新循环并重新订阅，因为cdkDrag元素现在在一个不同的列表中？谢谢!
Stack Overflow用户
回答已采纳
发布于 2020-04-13 02:25:37
恐怕你是对的。一旦您将一个项目从一个列表移动到另一个列表，它就会附加到另一个列表的一个新的CdkDrag实例上，这样您的订阅就会停止接收排放。更糟糕的是，它似乎是内存泄漏的潜在来源，因为订阅从未被明确删除。
最好的方法是直接在可拖放元素上添加一个侦听器：
<div *ngFor="let item of done"
(cdkDragStarted)="_dragStartedHandler($event)"
cdkDrag>{{item}}</div>_dragStartedHandler(element: CdkDragStart) {
console.log("started dragging");
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61180119
复制相关文章
相似问题
腾讯云开发者
