Question

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

以下是相关的代码片段：

帮助服务

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>

如何在TypeScript中的Angular Service中调用它

2 个答案: