Warum wird die $ onInit-Methode im folgenden Beispiel nicht aufgerufen?

Question

Ich würde gerne Angulars Komponentenmethode verwenden, aber es scheint, dass etwas nicht stimmt. Ich habe diesen Code eine Weile überprüft. Es gibt keinen Tippfehler, es scheint, dass es für die Dokumentation passt, aber es funktioniert trotzdem nicht.

Ich habe checked, Angular 1.5.3 ist installiert.

Es gibt keine Ausgabe auf der Konsole. Nach dem Blogeintrag documentation und this sollte ich den "onInit" -Text sehen.

Die Vorlage der Komponente wird korrekt angezeigt, und ich kann sehen, dass die Vorlage geladen ist, aber es scheint, dass der Controller nicht instanziiert/ausgelöst wird.

Meine App ist in Typescript geschrieben.

Die Komponente:

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

kompilierten Code:

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

Layout-Vorlage:

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

} 

Zusammengestellt Controller-Code:

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

Ich rief die $ oninit auf eine falsche Art und Weise. Hier ist der richtige, gut funktionierenden Code:

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

Ich denke, das auf fehlende Abhängigkeit Parameterliste auf der Moduldefinition zurückzuführen ist. Es gibt einen Unterschied in diesen beiden Aussagen:

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

Die erste Anweisung versucht, ein vorhandenes Modul mit dem Namen dilib zuzugreifen, während die zweite Anweisung ein Modul dilib ohne Abhängigkeiten zu schaffen versucht. Ich glaube, Sie versuchen, ein neues Modul zu erstellen, und benötigen daher das zweite Format.