无法在 class 的正文中写入 JavaScript

Question

在 C# 中，建议避免在构造函数中加载数据。相反，实例化一个 class，然后在需要执行诸如从数据库加载数据之类的操作时创建一个方法。在使用 TypeScript 的 AngularJS 中，是通过构造函数在控制器中加载运行方法的唯一方法吗？即，下面的代码无法在 TypeScript 中编译。那是因为我必须从构造函数中调用 activate 吗？

class BaHomeController{
    entries: any[];    
    static $inject = ["$http"];

    constructor(
        private $http
    ){}

    private loadEntries() {
        this.$http.get("api/blogEntries").then(function(response) {
            this.entries = response.data;
        });
    }

    private activate(): void{
        this.loadEntries();
    }

    activate();   
}

Answer 1

无论如何，对数据的调用将是异步的，因此将调用放在构造函数中似乎没什么大不了的。

你试过吗？

   constructor(){
        this.loadEntries();
   }

请注意 loadEntries 内部回调的异步性质意味着您的控制器将存在 this.entries 未定义，直到 $http.get 调用 returns 成功

Answer 2

你的格式对我来说一团糟，也许这种格式会让事情更清楚。此外，您不能像之前那样在 class 声明中调用 activate，这就是您没有编译的原因。

class BaHomeController{
    // private field
    entries: any[];

    static $inject = ["$http"];    
    constructor(private $http)
    {
        //This is calling the private activate method in the constructor
        this.activate();  
    }
    //private method
    private loadEntries() 
    {
        this.$http.get("api/blogEntries").then(function(response) {
            this.entries = response.data;
        });
    }
    //private method that return void
    private activate(): void
    {
        this.loadEntries();
    }     
}

Answer 3

你也可以解析路由中的数据：

angular.module('app.something')
    .config(routing);

routing.$inject = ['$stateProvider'];
function routing(stateProvider: angular.ui.IStateProvider) {
    stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'scripts/home/home.html',
            controller: 'app.something.BaHomeController',
            controllerAs: 'vm',
            resolve: {
                entries: loadEntries
            }
        })
}
function loadEntries() {
    //Make call to entries service
    return entriesService.getEntries(); //Make the http call in the service and also deal with the promise there.
}

你的控制器

class BaHomeController{

static $inject = ["$http"];    
constructor(private $http: ng.IHttpService,
            public entries: any){ }

}

另一种方法是在控制器中有一个 init 函数并从 html 调用它，以便在页面加载时调用它

class LayoutController {

    dataModel: app.layout.TopSearchHtmlDataModel;
    vehicleSearchModel: app.layout.VehicleSearchModel;

    static $inject = [
        'app.services.SlideService',
        'app.services.VehicleService',
        'app.services.CommonUtils',
        '$rootScope',
        '$filter',
        '$state'
    ];

    constructor(
        private slideService: app.services.SlideService,
        private vehicleService: app.services.VehicleService,
        private commonUtils: app.services.CommonUtils,
        private $rootScope: ng.IRootScopeService,
        private $filter: any,
        public $state: ng.ui.IStateService) {

        this.dataModel = new app.layout.TopSearchHtmlDataModel();
        this.vehicleSearchModel = new app.layout.VehicleSearchModel();
    }

    init(): void {
        this.getAllMakeAndModelData();
        this.getIrishCounties();
        this.getMinYearArray();
        this.getLogoSlides();
    }
    //Private methods omitted
}

html:
    <div ng-init="vm.init()"></div> //assuming you use controllerAs vm

无法在 class 的正文中写入 JavaScript

Cannot write JavaScript in the body of a class

javascript

angularjs

typescript

typescript1.7