使用Angular2的JsPlumb

Question

我正在尝试使用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结合使用是一种反模式。

是否有人可以提供一种替代的或更好的设计方法，以便在angular2或任何其他类似的库中使用jsPlumb。

Answer 1

我正处于类似的情况，我需要在angular 2中使用JSplumb。我采取的方法是使用jsplumb的typescript包装器，并使用它提供的默认工具与angular 2集成。这是在集成其他类似库时起作用的方法，但由于jsplumb库没有有效的类型化包装器，所以对jsplumb无效。

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