Question

我正在使用Angular 4，我正在尝试使用jsplumb connect plugin连接两个元素。

但它只是第一次正常工作，意味着如果我有3个源元素并希望连接到单个目标，那么它将正常工作，它将连接。

但是现在如果我以编程方式在源列表中添加第4个源元素，使用子组件然后调用connect方法，它就不起作用了。

意味着一旦我使用了jsplumb.connect函数，然后将新的源元素添加到列表并再次调用connect，它就无法正常工作。

parentCreateLine.component.ts

sourceIds = ['s1', 's2', 's3'];

/* this is step 1 intial call from ui */
showIntialConnection() {
   this.connectSourceToTargetUsingJSPlumb(this.sourceIds);
}

/* this function will be called from UI to add new source and then show connection */
addNewSourceToListAndConnect(){
   this.sourceIds.push('s4');
   this.connectSourceToTargetUsingJSPlumb(this.sourceIds);
}
connectSourceToTargetUsingJSPlumb(sourceIds) {
        console.log('create connection');
        jsPlumb.reset();
        let labelName;
            for (let i = 0; i < sourceIds.length; i++) {
                labelName = 'connection' + (i + 1);
                jsPlumb.connect({
                    connector: ['Flowchart', {stub: [212, 67], cornerRadius: 1, alwaysRespectStubs: true}],
                    source: sourceIds[i],
                    target: 'target0',
                    anchor: ['Right', 'Left'],
                    endpoint: 'Blank',
                    paintStyle: {stroke: '#B8C5D6', strokeWidth: 4},
                    overlays: [
                        ['Label', {label: labelName, location: 0, cssClass: 'connectingConnectorLabel'}]
                    ],
                });
            }
    }

请帮帮我。我也尝试过uuid，但得到了相同的输出。请在Angular 4中建议我正确的方法。

Answer 1

最后，我得到了解决方案，我在ngAfterViewInit中创建了jsplumb的实例，然后使用它以正确的顺序重置，

this.jsPlumbInstance.reset();
jsPlumb.reset();
this.jsPlumbInstance = jsPlumb.getInstance();

以便每次都能获得新实例。

parentCreateLine.component.ts

jsPlumbInstance;
ngAfterViewInit() {
        jsPlumb.reset();
        this.jsPlumbInstance = jsPlumb.getInstance();
    }

connectSourceToTargetUsingJSPlumb(sourceIds) {
        this.jsPlumbInstance.reset();
        jsPlumb.reset();
        this.jsPlumbInstance = jsPlumb.getInstance();
        let labelName;
        for (let i = 0; i < sourceIds.length; i++) {
            labelName = 'connection' + (i + 1);
            this.jsPlumbInstance.connect({
               ... above code ...
            });
        }
    }

Answer 2

您可以共享常见的jsPlumb实例，在下面找到代码这些对我有用

app.component.ts

import { jsPlumb } from 'jsplumb';
constructor(private customService: CustomService) {
  customService.jsPlumbInstance = jsPlumb.getInstance();
}

child.component.ts

import {CustomService} from '...path to the service';

constructor(private customService: CustomService) {}

ngAfterViewInit() {
   this.jsPlumbInstance = this.customService.jsPlumbInstance;
   this.jsPlumbInstance.deleteEveryConnection();
   this.jsPlumbInstance.deleteEveryEndpoint();
   this.jsPlumbInstance.importDefaults({...}) 
}

在角度4中添加新的源元素后，jsplumb.connect第二次无法工作

parentCreateLine.component.ts

2 个答案:

parentCreateLine.component.ts