angularjs - 方法中未定义的 typescript 构造函数参数

Question

我正在努力思考如何结合使用 Typescript 和 Angularjs。我已经阅读了几篇博客文章和两个项目的文档，但没有坚持下去。

我有一个 Angular Controller ，它接受两个依赖项，$scope 和我编写的名为 greetingService 的服务。我已经定义了一个主应用程序 Angular 模块并将 Controller 和服务附加到它。我的 Typescript 构造函数中有日志语句，以便我可以在浏览器中检查依赖项。在我的 Controller 和自定义服务的构造函数中，依赖项被正确注入(inject)。但是，在 Controller 中，当我尝试使用依赖项时，它是未定义的。我认为这段代码片段比我能解释的更能说明问题。

declare var angular;

module App.Services {
    export class GreetingService {

        constructor(private $http) {
            console.log("In greeting service constructor");
            console.log($http);
        }

        getGreetingsPromise() {
            return this.$http.get('/greetings.json');
        }
    }
}

module App.Controllers {
    export class GreetingController {

        static $inject = ['$scope', 'greetingService'];
        constructor(public $scope, public greetingService: App.Services.GreetingService) {
            this.$scope.greeting = "This will be a greeting.";
            this.$scope.greet = this.greet;

            console.log(greetingService); // this is defined and looks right
        }

        greet(language: string) {
            console.log("Greeting...");
            console.log(this.$scope); // this is undefined
            console.log(this.greetingService); // this is undefined
            var greetingPromise = this.greetingService.getGreetingsPromise();
            greetingPromise.then(data => this.$scope.greeting = data[language]);
        }
    }
}


var mainApp = angular.module('mainApp', []);
mainApp.controller('greetingController', ['$scope', 'greetingService', App.Controllers.GreetingController]);
mainApp.service('greetingService', App.Services.GreetingService);

这里是 Angular 模板(正确显示在构造函数中初始化的“This will be a greeting”)。

<div class="jumbotron">
    <div ng-controller="greetingController">
        <p class="lead">{{greeting}}</p>
        <button ng-click="greet('english')">Greet me</button>
    </div>
</div>

Answer 1

这一行:

this.$scope.greet = this.greet

是问题所在。您只是将函数引用复制到作用域属性，当使用作用域调用它时 this 将不是 Controller 实例，它由调用者确定(在您的情况下，this 应该是从模板调用时 greet 函数内部的范围本身)除了绑定(bind)函数。快速解决方法是使用 function.bind .即 this.$scope.greet = this.greet.bind(this) 用于创建绑定(bind)函数，函数引用绑定(bind)到 Controller 实例。您还可以使用箭头函数并将其指定为引用，这将强制 TS 将任何 this 转换为 _this 缓存变量:

   greet = (language: string) => {
        console.log("Greeting...");
        console.log(this.$scope); // this is undefined
        console.log(this.greetingService); // this is undefined
        var greetingPromise = this.greetingService.getGreetingsPromise();
        greetingPromise.then(data => this.$scope.greeting = data[language]);
    }

理想情况下，如果您使用 controller As(前提是您的 angular 支持它，如果不强烈建议升级)语法而不是直接使用范围，您就不需要做所有这些。

即:

export class GreetingController {
    greeting :string;

    static $inject = ['greetingService'];

    constructor(public greetingService: App.Services.GreetingService) {
        this.greeting = "This will be a greeting.";
    }

    greet(language: string) {
        var greetingPromise = this.greetingService.getGreetingsPromise();
        greetingPromise.then(data => this.greeting = data[language]);
    }
}

和

<div class="jumbotron">
    <div ng-controller="greetingController as vm">
        <p class="lead">{{vm.greeting}}</p>
        <button ng-click="vm.greet('english')">Greet me</button>
    </div>
</div>