javascript - 为什么在下面的示例中未调用$ onInit方法？

我想使用angular的component方法，但是似乎出了点问题。我一直在仔细检查这段代码一段时间。没有错字，似乎适合文档，但仍然无法正常工作。

我有checked，已安装Angular 1.5.3。

控制台上没有输出。根据documentation和this博客条目，我应该看到“ onInit”文本。

组件的模板正确显示，并且可以看到该模板已加载，但是似乎控制器未实例化/未触发。

我的应用是用Typescript编写的。

组件：

module sayusiando.dilib.spa {

    export class LeftHandMenuComponent implements ng.IComponentOptions {

        public transclude: boolean = false;
        public controller: Function = LeftHandMenuController;
        public controllerAs: string = "vm";
        public templateUrl: string = "app/layout/leftHandMenu/leftHandMenuTemplate.html";

    }

    angular
        .module("dilib")
        .component("dilibLeftHandMenu", new LeftHandMenuComponent());
}

编译代码：

var sayusiando;
(function (sayusiando) {
    var dilib;
    (function (dilib) {
        var spa;
        (function (spa) {
            var LeftHandMenuComponent = (function () {
                function LeftHandMenuComponent() {
                    this.transclude = false;
                    this.controller = spa.LeftHandMenuController;
                    this.controllerAs = "vm";
                    this.templateUrl = "app/layout/leftHandMenu/leftHandMenuTemplate.html";
                }
                return LeftHandMenuComponent;
            })();
            spa.LeftHandMenuComponent = LeftHandMenuComponent;
            angular
                .module("dilib")
                .component("dilibLeftHandMenu", new LeftHandMenuComponent());
        })(spa = dilib.spa || (dilib.spa = {}));
    })(dilib = sayusiando.dilib || (sayusiando.dilib = {}));
})(sayusiando || (sayusiando = {}));

布局模板：

<div>
    <dilib-left-hand-menu class="col-lg-2"></dilib-left-hand-menu>
</div>

LeftHandMenuController：

module sayusiando.dilib.spa {
    "use strict";

    export interface ILeftHandMenuController {
    }


    export class LeftHandMenuController implements ILeftHandMenuController {

        $onInit: Function = (() => {console.log("onInit");});


        static $inject = ["LeftHandMenuService"];
        constructor(leftHandMenuService: sayusiando.dilib.spa.ILeftHandMenuService) {

            console.log("con");
            this.leftHandMenuService = leftHandMenuService;

            //this.activate();
            console.log("construct");
        }

        activate() { //activate logic }

    }

    angular
        .module('dilib')
        .controller('leftHandMenuController', LeftHandMenuController);

}

编译的控制器代码：

var sayusiando;
(function (sayusiando) {
    var dilib;
    (function (dilib) {
        var spa;
        (function (spa) {
            "use strict";
            var LeftHandMenuController = (function () {
                function LeftHandMenuController(leftHandMenuService) {
                    this.$onInit = (function () { console.log("onInit"); });
                    console.log("con");
                    this.leftHandMenuService = leftHandMenuService;
                    //this.activate();
                    console.log("construct");
                }
                LeftHandMenuController.prototype.activate = function () {
                    var _this = this;
                    this.leftHandMenuService.getLeftHandMenu()
                        .then(function (result) {
                        _this.leftHandMenu = result;
                    });
                };
                LeftHandMenuController.$inject = ["LeftHandMenuService"];
                return LeftHandMenuController;
            })();
            spa.LeftHandMenuController = LeftHandMenuController;
            angular
                .module('dilib')
                .controller('leftHandMenuController', LeftHandMenuController);
        })(spa = dilib.spa || (dilib.spa = {}));
    })(dilib = sayusiando.dilib || (sayusiando.dilib = {}));
})(sayusiando || (sayusiando = {}));

最佳答案

我以错误的方式调用了$ oninit。这是正确且运行良好的代码：

module sayusiando.dilib.spa {
    "use strict";

    export interface ILeftHandMenuControllerScope {

    }


    export class LeftHandMenuController implements ILeftHandMenuControllerScope {

        public leftHandMenu: Array<sayusiando.dilib.spa.IModuleContract>;

        static $inject = ["leftHandMenuService"];
        constructor(
            private leftHandMenuService: sayusiando.dilib.spa.ILeftHandMenuService) {

        }


        public $onInit = () => {

            this.leftHandMenuService.getLeftHandMenu()
                .then((result: Array<sayusiando.dilib.spa.IModuleContract>): void => {
                    this.leftHandMenu = result;
                });

        }

    }

    angular
        .module('dilib')
        .controller('leftHandMenuController', LeftHandMenuController);

}