我正在尝试使用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是一种反模式。
一些人可以提供替代或更好的设计方法来将jsPlumb与angular2或任何其他类似的库一起使用。
答案 0 :(得分:1)
我处于类似的情况,我需要使用角度为2的JSplumb。我采用的方法是使用jsplumb的typescript包装器并使用它提供的默认工具与angular 2集成。这是集成其他类似库的方法,但由于jsplumb库的有效类型包装器不可用而无法用于jsplumb。
我联系了JSplumb团队寻找一个有效的包装器用于角度2但他们拒绝说角度2不是他们的直接管道