从 sigma.js 绑定事件调用 angular2 组件函数

Question

我的 angular2 组件中有一个简单的函数如下：

onSelectNode(label: String) {
console.log(label)
// do something based on label
  }

并在 angular2 中创建了一个基本的 sigma.js 图表，如下所示：

var s = new sigma({
  graph: sigmaJson,
  container: 'network-graph',
  settings: {
    defaultNodeColor: '#ec5148'
  }
});

我的图表已成功呈现。现在我想在单击其中一个节点时调用函数 onSelectNode。因此，我使用了 bind 功能，如下所示：

s.bind('clickNode', nodeClick)

函数nodeClick定义如下：

nodeClick(event) {
this.selectedLabel = event.data.node.label
console.log(this.selectedLabel)   // this prints correctly
this.onSelectNode(this.selectedLabel)  // getting error here

}

但我无法从 nodeClick 函数中调用组件函数。我在 javascript 控制台中收到以下错误：

ERROR TypeError: this.onSelectNode is not a function

谁能指出我做错了什么？

Answer 1

找到解决方案。问题是使用了 first comment here 中指出的错误 this 范围变量。最后对代码进行了以下更改并且有效：

将当前 this 上下文保存在回调函数之前的单独变量中。

var self = this;
修改代码如下：

s.bind('clickNode', function (e) { console.log(e.type, e.data.node.label, e.data.captor); self.selectedLabel = e.data.node.label; self.OnSelectNode(self.selectedLabel); });

从 sigma.js 绑定事件调用 angular2 组件函数

calling angular2 component function from sigma.js bind events

events

sigma.js

angular