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

У меня есть компонент 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 и где я ожидаю увидеть это (эти) преимущества (с)?


angularjs angularjs-components
person ryasun    schedule 14.06.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

$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"
    })
person Mike Lunn    schedule 15.06.2017