以下の例で$ onInitメソッドが呼び出されないのはなぜですか？

Question

私はangleのコンポーネントメソッドを使いたいですが、何かが間違っているようです。私はこのコードをしばらくチェックしています。タイプミスはありません。ドキュメントには合っているようですが、まだ動作していません。

私にはcheckedがあり、角度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で既存のモジュールにアクセスしようとします。私はあなたが新しいモジュールを作成しようとしていると思いますので、2番目のフォーマットが必要です。