如何在Angular 16项目中实现jsPlumb社区版？旧版本方法已弃用

1. 安装适配现代框架的jsPlumb版本 #

直接安装最新版jsPlumb Community Edition，它提供了ES模块支持，适配Angular 16这类现代框架：

npm install jsplumb

组件内导入时使用ES模块语法，替代旧版的全局导入方式：

import { jsPlumb, Instance } from 'jsplumb';

2. 选择正确的生命周期钩子初始化 #

Angular 16的DOM渲染时机与旧版本不同，必须在DOM元素完全渲染后初始化jsPlumb，推荐使用ngAfterViewInit钩子：

@ViewChild('nodeA') nodeA!: ElementRef;
@ViewChild('nodeB') nodeB!: ElementRef;
private jsPlumbInstance?: Instance;

ngAfterViewInit(): void {
  // 创建jsPlumb实例并配置基础参数
  this.jsPlumbInstance = jsPlumb.getInstance({
    Connector: ['Flowchart', { stub: [30, 50], gap: 8 }],
    Anchors: ['Right', 'Left'],
    PaintStyle: { stroke: '#4285F4', strokeWidth: 2 }
  });

  // 连接两个节点
  this.jsPlumbInstance.connect({
    source: this.nodeA.nativeElement,
    target: this.nodeB.nativeElement
  });

  // 开启节点拖拽
  this.jsPlumbInstance.draggable(this.nodeA.nativeElement);
  this.jsPlumbInstance.draggable(this.nodeB.nativeElement);
}

模板中需为节点添加模板引用变量：

<div #nodeA class="jsplumb-node">节点A</div>
<div #nodeB class="jsplumb-node">节点B</div>

3. 处理Angular变更检测的冲突 #

Angular的自动变更检测可能会重新渲染DOM，导致jsPlumb连接丢失。可以通过标记初始化状态避免重复执行，或手动控制变更检测：

private isInitialized = false;
constructor(private cdr: ChangeDetectorRef) {}

ngAfterViewChecked(): void {
  if (!this.isInitialized) {
    this.initJsPlumb(); // 封装初始化逻辑到单独方法
    this.isInitialized = true;
    this.cdr.detectChanges();
  }
}

4. 替换已弃用的旧API #

旧版本示例中的全局方法已被废弃，全部改用实例化后的方法调用：

5. 组件销毁时清理资源 #

为避免内存泄漏，在组件销毁时销毁jsPlumb实例：

ngOnDestroy(): void {
  this.jsPlumbInstance?.destroy();
}

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