Question

我正在尝试在Angular2组件中使用vis.js（或jQuery）点击事件。我的图表显示得很好，我可以成功捕获点击事件。

但是，在点击事件的上下文中，我放弃了对组件属性的引用。例如，this.visData来自事件中的undefined：

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操作库不建议练习，但有时它只是你得到的。

在这些活动中维护对组件属性的引用的最佳方法是什么？

至关重要的是，我的页面上有很多这样的组件，所以我认为不需要某种全局存储。

Answer 1

尝试使用 箭头功能（（）=＆gt;） ，如下所示，

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
});

从jQuery或其他事件访问组件属性

1 个答案: