如何在TypeScript的Angular Service中调用纠正这个错误

Question

我有一个TypeScript angular项目，想要重构它来使用服务。我的问题是现在我在服务中调用它，但在运行时它不是预期的服务类，而是控制器类。如何从服务本身调用服务内部的函数?

以下是相关的代码片段:

辅助服务

export interface IHelperService {
    Log(msg: string): void;
    GetModel(model: string): Array<any>;
}
export class HelperService implements IHelperService {
    public GetModel(model: string): Array<any> {
        return this.getModelEnum(model);
    }
    private getModelEnum(model: string): Array<any> {
        ...
    }
}
let module: angular.IModule = angular.module("myApp", ["ngTouch"]);
module.service('HelperSvc', HelperService);

控制器

constructor($scope: angular.IScope, $http: angular.IHttpService, helperSvc: IHelperService) {
    this.Scope.GetModel = helperSvc.GetModel;
}

HTML

<select ng-model="ae.Scope.Model"
    ng-options="type.Id as type.Value for type in GetModel('Types')"></select>

在

搜索结果

Error: this.getModelEnum is not a function

只要GetModel/getModelEnum函数在控制器内部，这就可以正常工作。

(最困扰我的是谷歌总是从我的搜索查询中剥离this。当然，结果是完全不同的…)

Answer 1

在TypeScript和JavaScript中，函数内部的this引用都是在调用时确定的。调用controller.Scope.GetModel()将把this引用绑定到作用域对象而不是助手服务。

你所要做的就是显式绑定this:

this.Scope.GetModel = helperSvc.GetModel.bind(helperSvc);
// or
this.Scope.GetModel = (model:string): Array<any> => helperSvc.GetModel(model);

或者使用函数绑定语法，如果你有一个编译器支持它:

this.Scope.GetModel = ::helperSvc.GetModel;

Answer 2

您在作用域上设置了对GetModel方法的直接引用，从而在以后调用helperSvc时失去了它的上下文。

你应该始终通过服务对象调用服务。

this.Scope.helper = helperSvc;

在HTML中

<select ng-model="ae.Scope.Model"
ng-options="type.Id as type.Value for type in helper.GetModel('Types')"></select>