从删除节点 vis.js 处的操作调用自定义方法

Question

我正在尝试将 vis.js (v4.21.0) 与 Angular (v4.2.4) 一起使用。

我想在删除节点之前调用一个自定义方法，所以我在操作中添加了一个删除节点的方法，但是我无法从中调用我的自定义方法。

My-component.ts

export class MyComponentComponent implements OnInit {

private graphData: any;
private options: any;

constructor() { }

ngOnInit() {
let nodeList = new Vis.DataSet([
  {id: 1, label: 'Node 1'},
  {id: 2, label: 'Node 2'},
  {id: 3, label: 'Node 3'},
  {id: 4, label: 'Node 4'},
  {id: 5, label: 'Node 5'}
]);

// create an array with edges
let edgeList = new Vis.DataSet([
  {from: 1, to: 3},
  {from: 1, to: 2},
  {from: 2, to: 4},
  {from: 2, to: 5}
]);
this.graphData = {nodes: nodeList, edges: edgeList};

this.options = {
manipulation: {
  enabled: true,
  initiallyActive: false,
  addNode: true,
  addEdge: true,
  editEdge: true,
  deleteNode: function(nodeData,callback) {
    this.deleteNodeFunction(nodeData); // defined below
     `here getting issue ''this'' is not defined.`
  },
  deleteEdge: true,
}
};

let network;

try {
 const container = document.getElementById('test');
  network = new Vis.Network(container, this.graphData, this.options);

}catch (e) {
  console.log(e.message)
}
}

deleteNodeFunction(nodeData){
// do something here 
// may be call some other method.
}

}

Answer 1

试试这个：

deleteNode: function(nodeData,callback) {
  this.deleteNodeFunction(nodeData); // defined below
}.bind(this),

发生的事情是，当 Vis.js 调用您的 deleteNode() 方法时，它使用自己的上下文调用它，因此 this 现在指的是网络而不是您的 MyComponentComponent实例。网络没有 deleteNodeFunction() 方法，所以没有任何反应。

调用 .bind(this) 应该可以避免这个问题。或者，您可以使用具有自动绑定功能的箭头函数：

deleteNode: (nodeData,callback) => {
  this.deleteNodeFunction(nodeData); // defined below
},

从删除节点 vis.js 处的操作调用自定义方法

Calling a custom method from the manipulation at delete node vis.js

angular

vis.js-network