从组件属性中隔离回调

Question

我是TypeScript和Angular 2的新手。

我对Cordova Camera Plugin有一个奇怪的问题：当我拍照时，似乎回调与组件的其余部分是隔离的！

这里是代码：

result.component.ts

import {Component, OnInit} from "@angular/core";

@Component({
    moduleId: module.id,
    selector: 'app-result',
    templateUrl: 'result.component.html'
})
export class ResultComponent implements OnInit {
    pictureSource;
    destinationType;
    status = 0; //VALUE I WANT TO PRINT

    constructor() {
        this.pictureSource = navigator.camera.PictureSourceType;
        this.destinationType = navigator.camera.DestinationType;
    }

    ngOnInit(): void {

    }

    test() {
        console.log(this.status); //VALUE I PRINT
    }

    capturePicture() {
        let cameraOptions = {
            quality: 100,
            destinationType: this.destinationType.FILE_URI
        };
        navigator.camera.getPicture(this.onCaptureSuccess, this.onCaptureFail, cameraOptions);
    }

    onCaptureSuccess(fileURI: string): void {
        console.log(this.status); //THROW ERROR
    }

    onCaptureFail(error: string): void {
        console.log('error', error);
    }
}

result.component.html

<div>
    <h1>Photo</h1>

    <button (click)="capturePicture()">PHOTO</button>
    <button (click)="test()">TEST</button>
</div>

控制台输出

当我点击TEST button（此屏幕截图中的8次）时，我已经获得了console.log的作品。 然后，当我点击PHOTO button时，拍下照片，然后回来，我已经Cannot read property 'status' of null 然后，我在TEST button上单击4次，状态值出现....

似乎navigator.camera.getPicture的回调与组件的其余部分隔离，我们如何解释？

Answer 1

我从未使用过Angular或Cordova，但它看起来像是这个上下文的简单丢失。 Angular的单击处理程序确实尊重组件上下文。但是在行......

navigator.camera.getPicture(this.onCaptureSuccess, this.onCaptureFail, cameraOptions);

...你只是移交对函数的引用而 getPicture 无法知道你的上下文。解决此问题的一种方法是绑定 this ：

navigator.camera.getPicture(this.onCaptureSuccess.bind(this), this.onCaptureFail, cameraOptions);

或者使用箭头功能，或使用闭包缓冲此，或者......