Eventhandler-function이 다른 (도우미) 함수를 사용할 수 없습니다.

Question

Cytoscape.js 및 Angular2 +를 사용하여 앱을 빌드하려고합니다. 핵심 부분은 단일 서비스 (cy.service)에서 발생합니다. 모든 EventListener를 단일 함수에 추가하고 cy init 다음에 호출합니다.

예 :

initEventlisteners(){ 
    cy.on('tap', this.handler); 
    cy.on(...); 
    ... 
} 

handler(event: any){ 
console.log('something'); 
} 

것은 내가 그런 도우미 기능에 CONSOLE.LOG을 포장하는 경우 :

helper(){ 
console.log('something'); 
) 

그리고 핸들러 함수에서 사용

handler(event:any){ 
this.helper(); 
} 

그것을 calls : helper()는 함수가 아닙니다. 큰 문제는 처리기 내부에서 다른 기능을 사용할 수 없다는 것을 의미합니다. 아이디어를 어떻게 해결할 수 있습니까?

Answer 1

이렇게 바인딩하면 cy.on('tap', this.handler); 변수의 범위가 느슨해지기 때문입니다. 이 방법으로 cy.on('tap', (event) => { this.handler(event) }); (어떤 event 객체를 전달하는 경우) 또는 cy.on('tap', this.handler.bind(this));을 사용해야합니다.

() => { }의 frist 접근 방식은 arrow function이라고하며 현재 변수 범위를 유지합니다. ES6 사양의 새로운 기능입니다. 그러나 두려워 할 필요는 없습니다. 각도 컴파일러는 ES5과 호환되는 이전 버전으로 변환합니다.

두 번째 접근 방식 .bind(this) 그냥이 메서드를 호출 한 현재 범위에이 메서드를 바인딩하면됩니다.