Question

我正在使用TypeScript类在AngularJS中定义控制器：

class TrialsCtrl {
    constructor(private $scope: ITrialsScope, private ResourceServices: ResourceServices) {
        this.loadTrials();
    }

    loadTrials() {
        console.log("TrialsCtrl:", this);        
        this.Trial.query().then((result) => {
            this.$scope.Trials = result;
        });
    }

    remove(Trial: IRestTrial) {
        this.ResourceServices.remove(Trial, this.loadTrials);
    }
}
angular.module("app").controller("TrialsCtrl", TrialsCtrl);

我正在将常用的控制器方法重构为服务。

class ResourceServices {    
    public remove(resource, reload) {     
        if (confirm("Are you sure you want to delete this?")) {
            resource.remove().then(() => {
                reload();
            });
        }
    }
}

angular.module("app").service("ResourceServices", ResourceServices);

控制台日志显示this在我希望它为TrialsCtrl时引用窗口上下文。我的问题是reload()方法需要在TrialsCtrl的上下文中运行，以便它可以访问this.Trial和this.$scope。如何告诉reload()方法将this设置为TrialsCtrl？或者我应该使用其他一些解决方法吗？

Answer 1

你试过了吗？

this.ResourceServices.remove(Trial, this.loadTrials.bind(this));

或

this.ResourceServices.remove(Trial, () => this.loadTrials());

Answer 2

对于应该作为回调传递的方法（与this.loadTrials一样），最好将它们定义为箭头，

loadTrials = () => { ... }

因此，无论是否使用Function.prototype.bind，他们都会保留上下文。

或者，可以在方法上使用装饰器（如core-decorators @autobind）来绑定方法，同时仍然在类原型上定义它：

@autobind
loadTrials() { ... }

使用AngularJS依赖注入从另一个typescript类设置“this”的上下文

2 个答案: