JsPlumb与Angular2

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上的各种博客,我明白使用带有ng2的jQuery是一种反模式.

某些人可以提供替代或更好的设计方法来使用带有angular2或任何其他类似库的jsPlumb.

Answer 1

我处于类似的情况，我需要将 JSplumb 与 Angular 2 一起使用。我采取的方法是使用 jsplumb 的打字稿包装器，并通过其提供的默认工具与 Angular 2 集成。这种方法适用于集成其他类似的库，但不适用于 jsplumb，因为 jsplumb 库没有有效的类型化包装器。

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