在 Angular2 中更改 Select2 的数据和 processResults 上下文

Question

我在我的 Angular2 应用程序中使用 Select2，我需要在数据和 processResults 中使用一些类属性。但是这些上下文不是类上下文：

export class DefaultFormInputSelectComponent {

    @Input() private validator;

    private select2Options() {

        return {
            ajax: {
                url: 'api',
                dataType: 'json',
                delay: 250,
                data: this.ajaxData,
                processResults: this.ajaxProcessResults
            }
        }

    };

    ajaxData = function(params) {

        // this variable is not in DefaultFormInputSelectComponent context

        this.validator; // returns undefined, but it is not in DefaultFormInputSelectComponent context

    }

    ajaxProcessResults = function(data) {
        // same issue as ajaxData
    }

}

我尝试在ajax 属性中添加context: this，但没有任何改变。

Answer 1

如果你读了一点关于 typescript 的文章，你会发现在类内部你不应该使用 function 关键字，并且像这样绑定回调会导致 this 上下文被放置到函数中。您应该使用箭头函数符号来创建您的函数或使用bind。或者您可以使用匿名箭头函数包装器：）您决定最喜欢什么：

export class DefaultFormInputSelectComponent {

    @Input() private validator;

    private select2Options(): any {
        return {
            ajax: {
                url: 'api',
                dataType: 'json',
                delay: 250,
                data: this.ajaxData,
                processResults: this.ajaxProcessResults.bind(this),
                anotherCallback: (data) => {
                    this.processAnother(data);
                }
            }
        }

    }

    private ajaxData: Function = (params: any): void => {
        console.log(this); //DefaultFormInputSelectComponent 
    };

    private ajaxProcessResults(data: any): void {
        console.log(this); //DefaultFormInputSelectComponent 
    }

    private processAnother(data: any): void {
        console.log(this); //DefaultFormInputSelectComponent 
    }
}