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

Why $onInit method is not invoked in the example below?

本文关键字：调用 onInit 方法 在下面 为什么      更新时间：2023-11-07

我想使用angular的component方法，但似乎有问题。我已经仔细检查了这个代码一段时间了。没有错别字，它似乎适合文档，但仍然不起作用。

我已经检查过，Angular 1.5.3已经安装。

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

我以错误的方式调用$oniit。这是正确的、工作良好的代码：

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);
}

我认为这是由于模块定义中缺少依赖参数列表。这两种说法有区别：

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

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

相关文章：