JsPlumb 与 Angular2

Posted 2023-03-05

【中文标题】JsPlumb 与 Angular2

【英文标题】：JsPlumb with Angular2

【发布时间】：2016-09-03 18:37:15

【问题描述】：

我正在尝试使用 jsplumb 来显示两个组件之间的连接。

我最终做的是使用 jQuery 来获取 UI 元素的句柄并使用它来呈现连接，以及 jsplumb 库。如下：

JsPlumb 配置

if( typeof jsPlumb !== 'undefined' && jsPlumb !== null ) 
  jsPlumb.ready(function() 
    jsPlumb.deleteEveryEndpoint();
    jsPlumb.setContainer(this._container);
    jsPlumb.Defaults.PaintStyle =  strokeStyle:'#339900', lineWidth:2, dashstyle: '3 3';
    jsPlumb.Defaults.EndpointStyle =  radius:7, fillStyle:'#339900' ;
    jsPlumb.importDefaults(
      Connector : [ 'Flowchart',  curviness:0  ],
      ConnectionsDetachable:true,
      ReattachConnections:true
    );
    jsPlumb.endpointClass = 'endpointClass';
    jsPlumb.connectorClass = 'connectorClass';
  );

Js-Plumb 用法

jsPlumb.connect(
  source: $('#'+entityFrom+'Panel'),
  target: $('#'+entityTo+'Panel'),
  anchors: ['RightMiddle', 'LeftMiddle']
);

从有关 angular2 的各种博客中，我了解到将 jQuery 与 ng2 一起使用是一种反模式。

谁能提供一种替代或更好的设计方法来将 jsPlumb 与 angular2 或任何其他类似库一起使用。

【参考方案1】：

我处于类似的情况，我需要将 JSplumb 与 angular 2 一起使用。我采用的方法是使用 jsplumb 的 typescript 包装器，并将 angular 2 与它提供的默认工具集成在一起。这是在集成其他类似库时有效的方法，但由于 jsplumb 库的有效类型化包装器不可用，因此不适用于 jsplumb。

我联系了 JSplumb 团队，要求在 Angular 2 中使用有效的包装器，但他们拒绝说 Angular 2 不是他们的直接管道

【讨论】：

这里有一个打字稿包装器：github.com/DefinitelyTyped/DefinitelyTyped/blob/master/jsplumb/…，您对如何使用它有想法吗？

我很久以前就试过了。它与 angular 2 的工作方式与其他库的工作方式不同。他们没有导出模块