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

标签 javascript jquery angular typescript vis.js

我正在尝试在 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/

相关文章:

javascript - CSS显示类型: Tabs

javascript - 创建一个函数,根据 jQuery 中的函数参数显示所选属性和值的文本

Angular MatDialog 附加到 HTML 而不是显示为弹出窗口

javascript - 我可以在 Parse JavaScript SDK 中使用其他 promise 实现吗?

java - GWT 与 PhoneGap 集成

javascript - 当你编写自己的jquery函数时,这意味着什么?

angular - 警告 : sanitizing unsafe style value

Angular Material Datepicker 不适合我

javascript - 如何使用Javascript更改href和html文本?

javascript - 可以知道文本光标在输入字段中的位置