Angular 4 - 单击jsplumb的覆盖标签时调用函数答案

【问题标题】：Angular 4 - Call a function while clicking on overlay label of jsplumbAngular 4 - 单击jsplumb的覆盖标签时调用函数
【发布时间】：2018-02-26 16:32:14
【问题描述】：

我正在使用 jsplumb 连接 angular 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() 函数，并且单击事件中的变量值未在视图中解析。有解决此问题的建议吗？？

【问题讨论】：

使用箭头函数，您将更接近您的解决方案
仍然无法更改 jsPlumb.connect() 中的角度变量的值并触发未定义的错误

标签： angular jsplumb

【解决方案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 函数的原因。

所以参考我的代码，代码工作正常。

谢谢

【讨论】：