拖拽移出ng dragula元素时同步移除动态数组对应元素的方法

嘿，这个问题我熟！用dragula的remove事件就能轻松同步数组和DOM的变化，具体步骤我给你拆解清楚：

1. 先在组件里监听dragula的移除事件 #

首先要确保你已经注入了DragulaService，然后在组件初始化的时候订阅对应容器的remove事件——这个事件会在元素被removeOnSpill移除时触发。

2. 绑定唯一标识，方便定位数组元素 #

在模板里的拖拽元素上，给每个元素加一个data-id属性（或者其他唯一标识），这样能精准找到它在数组里的对应项：

<div class='drag-drop-wrapper' style="width: 100%" *ngIf="route.checkpoints.length>0">
  <div 
    class='drag-drop-container' 
    [dragula]='"third-bag"' <!-- 替换成你实际的容器名称 -->
    *ngFor="let checkpoint of route.checkpoints; trackBy: trackById"
    [attr.data-id]="checkpoint.id"
  >
    <!-- 这里放你的checkpoint内容 -->
  </div>
</div>

3. 组件里的逻辑实现 #

在组件类里，订阅事件并同步更新数组，别忘了在组件销毁时取消订阅，避免内存泄漏：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { DragulaService } from 'ng2-dragula';
import { Subscription } from 'rxjs';

@Component({
  // 你的组件元数据
})
export class YourComponent implements OnInit, OnDestroy {
  private dragulaSub: Subscription;

  constructor(private dragulaService: DragulaService) {}

  ngOnInit() {
    // 订阅对应容器的remove事件，容器名要和模板里的[dragula]值一致
    this.dragulaSub = this.dragulaService.remove('third-bag')
      .subscribe(({ el }) => {
        // 从元素上拿到之前绑定的id
        const removedId = el.dataset.id;
        // 过滤数组，移除对应项
        this.route.checkpoints = this.route.checkpoints.filter(cp => cp.id !== removedId);
        
        // 如果你偏好splice写法也可以：
        // const index = this.route.checkpoints.findIndex(cp => cp.id === removedId);
        // if (index !== -1) {
        //   this.route.checkpoints.splice(index, 1);
        // }
      });
  }

  // 优化*ngFor的渲染性能，避免不必要的DOM重绘
  trackById(index: number, cp: any): string {
    return cp.id;
  }

  ngOnDestroy() {
    if (this.dragulaSub) {
      this.dragulaSub.unsubscribe();
    }
  }
}

为啥这么做？ #

当元素被拖出容器触发removeOnSpill时，dragula会触发remove事件，我们通过dataset.id拿到被移除元素的唯一标识，再用这个标识过滤数组，就能让数组和DOM的状态保持一致啦。加上trackBy是为了让Angular在数组变化时只更新必要的DOM元素，提升性能。

如果你的checkpoint没有id属性，换成其他唯一属性（比如uuid、唯一名称等）也完全没问题。

内容的提问来源于stack exchange，提问作者Sharaaf Nazeer