我正在尝试在 Angular2 组件中使用 vis.js
(或 jQuery)点击事件。我的图表显示得很好,并且我可以成功捕获点击事件。
但是,在单击事件的上下文中,我丢失了对组件属性的引用。例如,this.visData
在事件中是未定义
:
export class GraphContainerComponent implements OnInit {
private visData: {};
private options: {} = {};
private network: any;
@ViewChild('graphContainer') graphContainer;
ngOnInit() {
// populates this.visData
// this.visData = { nodes, edges }
this.makeGraph();
}
makeGraph() {
// no problem creating and displaying my graph, everything works
this.network = new vis.Network(this.graphContainer.nativeElement, this.visData, this.options);
// click event
this.network.on("selectNode", function (params) {
console.log(this.visData); // logs "undefined"
}
$('a').on('click', function() {
console.log(this.visData); // "undefined" as well
});
}
}
我理解为什么这是正常行为,并且我知道混合 Angular2 和 jQuery 或其他一些 DOM 操作库不是推荐的做法,但有时这就是你所拥有的。
在这些事件中维护对组件属性的引用的最佳方法是什么?
至关重要的是,我的页面上有数十个这样的组件,因此我不认为某种全局存储是可行的方法。
最佳答案
尝试使用箭头函数(()=>),如下所示,
this.network.on("selectNode", (params)=> { //<----this should work.
console.log(this.visData); // logs "undefined"
}
$('a').on('click', ()=> { //<----this should work.
console.log(this.visData); // "undefined" as well
});
关于javascript - 从 jQuery 或其他事件访问组件属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39549683/