Angular 服务函数未定义 - MVC6

Question

我正在尝试编写一个登录服务（在打字稿中），它将用户名和密码发布到我的 C# 控制器。然后，C# 控制器进行服务调用，访问我的数据库以对用户进行身份验证，但这超出了此问题的范围。

问题是，当我尝试从我的 angular 控制器调用我的身份验证功能（在我的 angular 服务中找到）时，我的控制台出现错误，它是 unable to get property 'Authenticate' of undefined or null reference.

这是我的服务的基础 class（处理程序）：

module app.Services {
export class HttpHandlerService {
    httpService: ng.IHttpService;
    handlerUrl: string;

    constructor($http: ng.IHttpService) {
        super();
        this.httpService = $http;
    }

    useGetHandler(params: any): ng.IPromise<any> {
        var result: ng.IPromise<any> = this.httpService.get(this.handlerUrl, params)
            .then((response: any): ng.IPromise<any> => this.handlerResponded(response, params));
        return result;
    }

    usePostHandler(params: any): ng.IPromise<any> {
        var result: ng.IPromise<any> = this.httpService.post(this.handlerUrl, params)
            .then((response: any): ng.IPromise<any> => this.handlerResponded(response, params));
        return result;
    }

    handlerResponded(response: any, params: any): any {
        response.data.requestParams = params;
        return response.data;
    }

}
}

那我的登录服务就继承了它：

module app.Services {
export interface ILoginService {
    Authenticate(email: string, password: string): ng.IPromise<any>;
}

export class LoginService extends Services.HttpHandlerService {

    static $inject = ['$http'];

    constructor($http: ng.IHttpService) {
        this.handlerUrl = '/Login';
        super($http);
    }

    // Authentication function I am attempting to call
    Authenticate(email: string, password: string): ng.IPromise<any> {

        // I have not completed the actual request that is being sent 
        var config: any = {};
        var request = {
            "Email": email,
            "Password": password
        }

        return this.usePostHandler(config);
    }
}
angular.module('App').factory('loginService', LoginService);
}

这是我调用服务的登录控制器：

module app.Login {

import Services = app.Services;

interface ILoginController {
    email: string;
    password: string;
    login(): void;
}

class LoginController implements ILoginController{
    email: string;
    password: string;
    loginService: Services.ILoginService;

    loginForm: any;
    static $inject = ["$state"];
    constructor(private $state: ng.ui.IStateParamsService, loginService: Services.ILoginService) {
        this.email = "";
        this.password = "";
        this.loginService = loginService;
    }

    login() {
        if (this.loginForm.$invalid) {
            return;
        }

        var request = this.loginService.Authenticate(this.email, this.password);

        request.success(function (data) {
            console.log("User authenticated.");
        });

        request.error(function () {
            console.log("Error: User not authenticated.");
        });
    }
}
angular.module('App').controller('loginController', LoginController);
}

最后是我的 C# 控制器

[HttpPost]
[Route("/Login")]
public async Task<IActionResult> Login()
{
    // . . . .
}

如有任何帮助，我们将不胜感激。如果您需要更多信息，请告诉我。

编辑：

这是从登录服务打字稿生成的javascript：

var __extends = (this && this.__extends) || function (d, b) {

for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];

function __() { this.constructor = d; }

d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());

};

var app;

(function (app) {

var Services;

(function (Services) {

    var LoginService = (function (_super) {

        __extends(LoginService, _super);

        function LoginService($http) {

            this.handlerUrl = '/Login';

            _super.call(this, $http);

        }

        LoginService.prototype.Authenticate = function (email, password) {

            var config = {};

            var request = {

                "Email": email,

                "Password": password

            };

            return this.usePostHandler(config);

        };

        LoginService.$inject = ['$http'];

        return LoginService;

    })(Services.HttpHandlerService);

    Services.LoginService = LoginService;

    angular.module('App').factory('loginService', LoginService);

})(Services = app.Services || (app.Services = {}));

})(app || (app = {}));

我确实收到一个错误，仅在 IE 中，_super 未定义。

Answer 1

Unable to get property 'Authenticate' of undefined or null reference. 表示 this.loginService 没有被 Angular 正确注入。

您可以尝试更改此设置：

static $inject = ["$state"];

对此：

static $inject = ["$state", "LoginService"];

Proper Dependency Injection in Your AngularJS TypeScript Apps

Angular 服务函数未定义 - MVC6

Angular service function is undefined - MVC6

c#

angularjs

typescript

angular-services

asp.net-core-mvc