Frage JsPlumb mit Angular2


Ich versuche, jsplumb zu verwenden, um Verbindungen zwischen zwei Komponenten anzuzeigen.

Am Ende nutze ich jQuery, um das Handle zum UI-Element zu bringen und es zum Rendern von Verbindungen mit jsplumb library zu verwenden. Etwas wie unten:

JsPlumb-Konfiguration

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 Verwendung

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

Aus verschiedenen Blogs auf eckig2 verstehe ich, dass die Verwendung von jQuery mit ng2 ein Anti-Muster ist.

Kann jemand eine Alternative oder einen besseren Design-Ansatz bieten, um jsPlumb mit angular2 oder einer anderen ähnlichen Bibliothek zu verwenden?


5
2018-05-09 07:59


Ursprung


Antworten:


Ich bin in einer ähnlichen Situation, in der ich JSplumb mit angular 2 verwenden muss. Der Ansatz, den ich nahm, ist, den Typescript-Wrapper von jsplumb zu verwenden und mit angular 2 mit Standardwerkzeugen zu integrieren, die es bereitstellt. Dies ist der Ansatz, der bei der Integration anderer ähnlicher Bibliotheken funktioniert hat, aber nicht für jsplumb funktioniert, da kein gültiger typisierter Wrapper für die jsplumb-Bibliothek zur Verfügung steht.

Ich kontaktierte das JSplumb-Team für einen gültigen Wrapper, der in angular 2 verwendet werden sollte, aber sie weigerten sich zu sagen, dass angular 2 nicht ihre unmittelbare Pipeline ist


1
2017-12-20 11:34