Angular 5：如何使用jsPlumb让动态创建的组件可拖拽？

我之前在Angular里整合jsPlumb的时候也踩过一模一样的坑——静态元素拖拽连接都正常，动态生成的组件却像被jsPlumb完全无视了。其实核心原因很简单：jsPlumb默认只会初始化页面加载时就存在的DOM元素，动态添加的元素需要我们手动通知jsPlumb去处理。下面给你几个亲测有效的解决方案：

1. 找准时机：在动态组件渲染完成后注册 #

Angular的组件有自己的生命周期，动态组件（比如用*ngFor循环生成、或者通过组件工厂动态创建的）不会在页面初始化时就存在，所以你需要在组件完全渲染到DOM后，再调用jsPlumb的注册方法：

• 如果是*ngFor生成的元素，可以用ViewChildren结合ngAfterViewChecked钩子监听元素变化：

  @ViewChildren('dynamicItem') dynamicItems: QueryList<ElementRef>;
  
  ngAfterViewChecked() {
    // 确保元素列表有变化且已渲染
    if (this.dynamicItems && this.dynamicItems.length > 0) {
      this.dynamicItems.forEach(item => {
        // 检查是否已经被jsPlumb注册过，避免重复注册
        const existingEndpoints = jsPlumb.getEndpoints(item.nativeElement);
        if (existingEndpoints.length === 0) {
          jsPlumb.addEndpoint(item.nativeElement, {
            endpoint: 'Dot',
            anchor: 'RightMiddle'
          });
          // 设置可拖拽连接
          jsPlumb.makeSource(item.nativeElement, { allowLoopback: false });
          jsPlumb.makeTarget(item.nativeElement, { dropOptions: { hoverClass: 'dragHover' } });
        }
      });
    }
  }
  

  对应的模板里要给动态元素加模板引用变量：

  <div #dynamicItem [id]="'item-' + i" *ngFor="let item of dynamicList; let i = index">
    <!-- 组件内容 -->
  </div>
  

• 如果是通过ComponentFactoryResolver动态创建的组件，要在组件实例创建并挂载到DOM后再调用jsPlumb方法：

  const componentRef = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent)
    .create(this.injector);
  this.viewContainerRef.insert(componentRef.hostView);
  // 等待组件渲染完成
  setTimeout(() => {
    const element = componentRef.location.nativeElement;
    jsPlumb.addEndpoint(element, {/* 配置 */});
  }, 0);
  

2. 验证动态元素的ID是否正确绑定 #

有时候看起来ID设置了，但实际上Angular的绑定可能还没生效，导致jsPlumb找不到元素。你可以在浏览器控制台用document.getElementById('你的动态ID')检查元素是否存在，或者在模板里用插值表达式确认ID：

<div [id]="'dynamic-' + item.id">{{ 'dynamic-' + item.id }}</div>

确保每个动态元素的ID都是唯一的，避免重复ID导致jsPlumb识别错误。

3. 处理Angular的视图封装问题 #

如果你的动态组件启用了默认的ViewEncapsulation.Emulated，jsPlumb的样式可能无法穿透到组件内部，导致拖拽效果看不到。这时候可以：

• 把jsPlumb的全局样式放到styles.css（全局样式文件）里；
• 或者在动态组件类里设置encapsulation: ViewEncapsulation.None，关闭视图封装：

  @Component({
    selector: 'app-dynamic',
    templateUrl: './dynamic.component.html',
    styleUrls: ['./dynamic.component.css'],
    encapsulation: ViewEncapsulation.None
  })
  export class DynamicComponent {}
  

4. 避免重复注册元素 #

每次动态添加组件时，记得先检查该元素是否已经被jsPlumb注册过（比如用jsPlumb.getEndpoints(element)），避免重复添加端点导致的异常。

按照上面的方法调整后，动态组件应该就能被jsPlumb正常识别并支持拖拽连接了。

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