В этом случае бессмысленно использовать $onInit

Question

У меня есть компонент angularJS (1.5+), который имеет некоторые односторонние свойства привязки, которые связаны с переменными родительского контроллера. Этот компонент напрямую использует эти свойства в объекте привязок и не требует установки каких-либо локальных переменных.

Когда страница загружается, привязки компонента инициализируются и привязываются к значениям по умолчанию, поскольку родительский контроллер инициализирует свои переменные значениями по умолчанию.

пример кода:

App.component('myComponent',{
    bindings:{
        binding_1: '<',
        binding_2: '<'
    },
    template:'<div ng-show="$ctrl.binding_1">' +
    '<input type="button" ng-click="$ctrl.clicked()">' +
    '</div>',
    controller: function () {
        var ctrl = this;

        // would ctrl.$onInit = function(){...} be beneficial here at all?

        ctrl.clicked = function(){
            console.log("ctrl.binding_2.text");
        }
});

Если компонент использует только свои свойства привязки и эти свойства инициализируются значениями по умолчанию через переменные родительского контроллера при загрузке страницы, то каковы будут преимущества от реализации $onInit и где я ожидаю увидеть это (эти) преимущество (ы)?

Answer 1

$onInit - это ловушка жизненного цикла инициализации компонента. Вы должны выполнить свою логику инициализации там. В случае вашего примера кода привязки компонентов, вероятно, будут доступны, так как они доступны в обработчике кликов. Вот небольшая демонстрация, демонстрирующая $onInit.

Инициализация компонента с помощью $onInit

angular.module('app',[])
.controller("MyController", function(){
  var ctrl = this;
  ctrl.title = "Hello World";
})
.component("myComponent", {
   bindings:{
        bindingOne: '<'
    },
    template: ' <h1>{{ctrl.title}}</h1>',
    controller: function(){
      this.$onInit = function(){
        this.title = this.bindingOne;
      }

    },
    controllerAs: "ctrl"
})

Инициализация компонента без $onInit

  angular.module('app',[])
    .controller("MyController", function(){
      var ctrl = this;
      ctrl.title = "Hello World";
    })
    .component("myComponent", {
       bindings:{
            bindingOne: '<'
        },
        template: ' <h1>{{ctrl.title}}</h1>',
        controller: function(){
          this.title = this.bindingOne;
        },
        controllerAs: "ctrl"
    })