爲什麼$ onInit方法在下面的例子中沒有被調用？

Question

我想使用angular的組件方法，但它似乎有什麼錯誤。我一直在仔細檢查這段代碼。沒有錯字，似乎適合文檔，但仍然不起作用。

我有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 = {})); 

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。我相信你正在嘗試創建一個新模塊，因此需要第二種格式。