ngOnInit에서 함수에 값 전달

Question

클립을 호출하는 버튼이 있습니다. ngOnInit에서 값을 전달해야하지만 그럴 수는 없습니다. 예를 들어 this.firstX에 대해 정의되지 않은 오류가 발생합니다. 어떻게 ngOnInit에서 함수로 값을 전달할 수 있습니까?

export class AppAppComponent implements OnInit { 

    public firstX: number; 
    public firstY: number; 
    public lastX: number; 
    public lastY: number; 

    constructor(mdIconRegistry: MdIconRegistry) { 
    mdIconRegistry 
     .registerFontClassAlias('fontawesome', 'fa'); 
    } 

    ngOnInit() { 

    let canvas = new fabric.Canvas('cLeft'); 
    let src = "../../images/kupurSecond.jpg"; 

    canvas.on('mouse:down', function (event) { 
     var position = canvas.getPointer(event.e); 
     this.firstX = position.x; 
     this.firstY = position.y; 
    }); 

    canvas.on('mouse:up', function (event) { 
     var position = canvas.getPointer(event.e); 
     this.lastX = position.x; 
     this.lastY = position.y; 
     // ReLoading Image 
     loadImage(src, canvas, this.firstX, this.firstY, this.lastX, this.lastY); 
    }); 

    loadImage(src, canvas); 

    }; 

    public clip() { 
    console.log(this.firstX); 
    } 

} 

Answer 1

동일한 this 컨텍스트로 유지하려면 화살표 표기법을 사용해야합니다.

canvas.on('mouse:down', (event) => { 
     var position = canvas.getPointer(event.e); 
     this.firstX = position.x; 
     this.firstY = position.y; 
}); 

동일한 내용은 mouse:up 기능입니다. 타이프 스크립트에 function이라는 단어를 사용하면 안됩니다.