jquery - JsPlumb 与 Angular2

标签 jquery html angular jsplumb angular2-template

我正在尝试使用 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 或任何其他类似库一起使用。

最佳答案

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

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

关于jquery - JsPlumb 与 Angular2,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37110476/

相关文章:

html - 如何在 anchor 标签的标题属性中添加图片标签?

javascript - 如果我的页面上有 Google map ,如何在其周围绘制一个半径为 "circle"的蓝点?

Angular2 ComponentResolver 和 ng-content 不呈现

angular - Firebase - 如何检测/观察 Firebase 用户何时验证他们的电子邮件,如 onAuthStateChanged

javascript - 如何在 JavaScript 中将事件对象转换为字符串?

javascript - jQuery - 根据屏幕宽度将像素添加到高度

javascript - 无法识别 JQUERY datetimepicker onSelect

javascript - 在 Javascript 中,如何避免 createTextElement 方法中的 "escaping"?

AngularJS 2错误未定义索引1

javascript - 将文本写入搜索框后自动触发 Enter 键按下?