在角度分量中使用$ onChanges与$ onInit

Question

Is there a difference between using Controller1 vs Controller2 ?

angular.module('app', [])
.component('foo', {
    templateUrl: 'foo.html',
    bindings: {
        user: '<',
    },
    controller: Controller1, //Or Controller2
});

function Controller1(){
    this.$onInit = function(){
      this.user = angular.copy(this.user);
    };

    this.$onChanges = function(changes){
      if(changes.user && !changes.user.isFirstChange()){
        this.user = angular.copy(changes.user.currentValue);
      }
    };
}


function Controller2(){
    this.$onChanges = function(changes){
      if(changes.user){
        this.user = angular.copy(changes.user.currentValue);
      }
    };
}

Why should I bother with $onInit when I can just do the same this in $onChanges and save some rows?

Is this type of initialization better in $onChanges and $onInit better for some other kind of initialization?

Answer 1

$onInit

Called on each controller after all the controllers on an element have been constructed and had their bindings initialized (and before the pre & post linking functions for the directives on this element). This is a good place to put initialization code for your controller.

$onChanges

The $onChanges lifecycle hook gets called for a few reasons. The first, is on component initialisation, it passes down that initial changes Object at runtime, so we can grab our data straight away. The second reason it gets called is only when changes occur to '<' (one-way databinding) and '@' (for evaluated DOM attribute values) that are being bound to from the parent component. Once $onChanges gets called, you'll get a special changes Object back that you can hook into, which we'll explore in the upcoming sections.

The primary practical difference is $onInit will be called only on the directive initialisation but $onChanges will be called during initialisation and when < and @ variables changes.