Question

我想使用angular的组件方法，但似乎有些不对劲。我一直在仔细检查这段代码。没有拼写错误，它似乎适合文档，但是，它仍然无法正常工作。

我有checked，安装了Angular 1.5.3。

控制台上没有输出。根据{{3}}和documentation博客条目，我应该看到“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 = {}));

Answer 1

我以错误的方式打电话给$ 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);

}

Answer 2

我认为这是由于模块定义中缺少依赖参数列表。这两个陈述有所不同：

angular.module("dilib")
angular.module("dilib",[])

第一个语句尝试访问名为dilib的现有模块，而第二个语句尝试创建没有依赖项的模块dilib。我相信你正在尝试创建一个新模块，因此需要第二种格式。

为什么在下面的示例中没有调用$ onInit方法？

2 个答案: