Question

我正在使用jsplumb连接角度4中的元素，并尝试在点击jsplumb的标签时显示带有动态内容的模态。

以下是代码

component.ts

ngAfterViewInit() {
   jsPlumb.ready(function () {
      var common = {
        connector: ["Flowchart"],
        anchor: ["Left", "Right"],
        endpoint: "Dot"
      };    
      jsPlumb.connect({
        source: "item_left",
        target: "item_right",
        paintStyle: { stroke: "lightgray", strokeWidth: 3 },
        endpointStyle: { fillStyle: "lightgray", outlineStroke: "gray" },
        overlays: [
          ["Arrow", { width: 24, length: 24, location: 0.80 }],
          ["Label", {
            label: "Process", id: "label", cssClass: "aLabel",
            events: {
              click: function (labelOverlay, originalEvent) {
                this.onJobSelect("jobId");
              }    
            }    
          }]    
        ]
      }, common);
   })
}

onJobSelect(jobId) {
//code...
}

此处无法识别onJobSelect（）函数，并且未在视图中解析click事件内的变量值。有任何解决这个问题的建议??

Answer 1

ngAfterViewInit() {
   let self = this;
   jsPlumb.ready(function () {
      var common = {
        connector: ["Flowchart"],
        anchor: ["Left", "Right"],
        endpoint: "Dot"
      };    
      jsPlumb.connect({
        source: "item_left",
        target: "item_right",
        paintStyle: { stroke: "lightgray", strokeWidth: 3 },
        endpointStyle: { fillStyle: "lightgray", outlineStroke: "gray" },
        overlays: [
          ["Arrow", { width: 24, length: 24, location: 0.80 }],
          ["Label", {
            label: "Process", id: "label", cssClass: "aLabel",
            events: {
              click: function (labelOverlay, originalEvent) {
                self.onJobSelect("jobId");
              }    
            }    
          }]    
        ]
      }, common);
   })
}

onJobSelect(jobId) {
//code...
}

我们遇到了范围问题，这就是您无法调用onJobSelect函数的原因。

请参阅我的代码，代码正常工作。

谢谢

Angular 4 - 在单击jsplumb的overlay标签时调用函数

1 个答案: