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组件函数

1 个答案: