在 Typescript 中编写 AngularJS 控制器的最佳实践

Question

我对 AngularJS 和 Web 开发非常陌生，并且在 C# 和 C++ 方面更有经验。 因此，我尝试使用 Typescript。

我现在正在开发一个控制器，但出现了一些奇怪的行为。 当使用下面代码中的登录功能时，会出现问题，服务 sessionService 和 userDataService 没有在 then 语句中定义。 在 then 之前和之后都可以访问。

class UserController {
  scope: UserControllerScope;
  location: ng.ILocationService;
  sessionService: SessionService;
  userDataService: UserDataService;

  constructor($scope: UserControllerScope,
              $location: ng.ILocationService,
              userDataService: UserDataService,
              sessionService: SessionService){
    this.scope = $scope;
    this.location = $location;
    this.userDataService = userDataService;
    this.sessionService = sessionService;
  }

  loginUser(username: string, pw: string) {
    var foundUser;
    console.log(this.sessionService);
    console.log(this.userDataService);
    console.log("Got into LoginUser");

    this.userDataService.getUserAsync(username, pw).then(function(foundUserFromDb) {
      console.log(this.sessionService);
      console.log(this.userDataService);
    });

    console.log(this.sessionService);
    console.log(this.userDataService);
    this.location.path("views/projects.html")
  }
}

有没有一种方法需要注入自定义服务，以便可以在类中的任何地方访问它们，或者您有更好的方法来处理服务和控制器的注入？

提前致谢。

Answer 1

this 在then() 的上下文中不是控制器。您必须将this 捕获到另一个变量中，例如self。如果您使用箭头函数，TypeScript 将为您执行此操作...

loginUser = (username: string, pw: string) => {
    var foundUser;
    console.log(this.sessionService);
    console.log(this.userDataService);
    console.log("Got into LoginUser");

    this.userDataService.getUserAsync(username, pw).then(foundUserFromDb => {
        console.log(this.sessionService);
        console.log(this.userDataService);
    });

    console.log(this.sessionService);
    console.log(this.userDataService);
    this.location.path("views/projects.html")
}

编译后的 JavaScript 应该看起来像这样......

var _this = this;
this.loginUser = function (username, pw) {
    var foundUser;
    console.log(_this.sessionService);
    console.log(_this.userDataService);
    console.log("Got into LoginUser");

    _this.userDataService.getUserAsync(username, pw).then(function (foundUserFromDb) {
        console.log(_this.sessionService);
        console.log(_this.userDataService);
    });

    console.log(_this.sessionService);
    console.log(_this.userDataService);
    _this.location.path("views/projects.html");
};