jQuery 또는 다른 이벤트에서 구성 요소 속성에 액세스

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

은 화살표 기능을 사용하려고 (() =>) 아래와 같이,

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