Angular Элемент CdkDrag теряет прослушиватель событий после переноса элемента в новый список

Question

Я использую Drag Drop CDK Angular для передачи предметов между двумя списками. Одна конкретная c функциональность, которая мне нужна, - это возможность прослушивания cdkDrag элемента started Subject, предоставляемого компонентным API. Однако после переноса элемента в новый список я теряю прослушиватель событий.

---

Пример кода здесь: https://stackblitz.com/edit/angular-m8lcqp

При перемещении элемента например Fall Asleep в списке Готово, я регистрирую started dragging в консоли. Но если вы попытаетесь переместить этот элемент обратно в первый список, событие не будет запущено. Что я делаю неправильно?

---

Чтобы подписаться на событие started, я использую ViewChildren, чтобы получить QueryList из cdkDrag. В течение ngAfterViewInit() я пропускаю oop через эти элементы перетаскивания и подписываюсь на событие started:

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

Как правильно отслеживать это событие? Нужно ли обнаруживать изменения на странице, а затем повторно вводить oop и повторную подписку, поскольку элемент cdkDrag теперь находится в другом списке? Спасибо!

Answer 1

Боюсь, ты прав. После перемещения элемента из одного списка в другой он присоединяется к новому экземпляру CdkDrag другого списка, поэтому ваша подписка прекращает получать выбросы. Хуже того, кажется, что это потенциальный источник утечки памяти, поскольку подписка никогда не прерывается явно.

Ваш лучший способ - добавить слушателя непосредственно на перетаскиваемый элемент:

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

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