使用 TypeScript 的 AngularJS 应用程序无法调用未定义的方法答案

【问题标题】：AngularJS app using TypeScript cannot call method of undefined使用 TypeScript 的 AngularJS 应用程序无法调用未定义的方法
【发布时间】：2013-07-08 14:07:51
【问题描述】：

我是 AngularJS 和 Web 开发的新手，所以这可能是一个愚蠢的问题，但我无法弄清楚。

我有我的主应用程序

/// <reference path="../../references.ts" />


angular.module("mainApp", [])
    .config(($routeProvider: ng.IRouteProvider) => {
        $routeProvider
            .when("/", {
                templateUrl: "/app/module/mainApp/partials/main.html",
                controller: AppController,
                //datacontext
                controllerAs: "dc"
            })
            .when("/login", {
                templateUrl: "/app/module/mainApp/partials/login.html",
                controller: LoginController,
                controllerAs: "dc",

            })
    })

    .run(($rootScope: ng.IRootScopeService, $location: ng.ILocationService, AuthService) => {
        $rootScope.$on("$routeChangeStart", (event, next, current) => {
            if (!AuthService.IsLoggedIn()) {
                if (next.templateUrl == "app/module/mainApp/partials/login") {
                    return;
                } else {
                    $location.path("/login");
                }
            }
        });
    })

我的身份验证服务如下所示。构造函数中的警报永远不会被调用

/// <reference path="../../../references.ts" />

class AuthService {
    constructor(public ServiceManager: IServiceManager, public TokenHandler) {
        alert("I am a constructor");
    }

    Login(loginRequest: Models.LoginRequest, successCallback) {
        var params = {
            username: loginRequest.username,
            password: loginRequest.password
        };

        var service = this.ServiceManager.CallGetWithoutToken("http://url...", params);
        service.success((data, status, headers, config) => {
            this.TokenHandler.SetToken(data.replace(reg, ''));
        });
    };

    IsLoggedIn() {
        return this.TokenHandler.GetToken() != undefined;
    }
}

angular.module("mainApp").factory("AuthService", () => AuthService.prototype);

最后我的 TokenHandler 就是这个

class TokenHandler {
    token = undefined;

    constructor() {
    }

    ClearToken() {
        this.token = undefined;
    };

    SetToken(sessionToken: string) {
        this.token = sessionToken;
    };

    GetToken() {
        return this.token;
    };
}

angular.module("mainApp").factory("TokenHandler", () => TokenHandler.prototype);

我所有的 .ts 文件都在 references.ts 中，并且我已将 .js 文件添加到 index.html。

当我运行它时，我得到一个错误，无法调用未定义的方法“GetToken()”

AngularJS 不应该在 AuthService 中注入我的 TokenHandler 吗？

【问题讨论】：

标签： angularjs typescript

【解决方案1】：

这些行似乎几乎肯定是错误的；你打算在这里传递 .prototype 做什么？

angular.module("mainApp").factory("TokenHandler", () => TokenHandler.prototype);

angular.module("mainApp").factory("AuthService", () => AuthService.prototype);

我想你想要：

angular.module("mainApp").factory("TokenHandler", () => new TokenHandler());

angular.module("mainApp").factory("AuthService", () => new AuthService());

【讨论】：