角度コンポーネントの$ onChangesと$ onInitの使用

Question

Controller1とController2の間に違いはありますか？

私はちょうど $onChangesでこれと同じ操作を行うと、いくつかの行を保存することができたときに

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

なぜ私は$onInitを気にする必要がありますか？

初期化のこのタイプは、$onChangesと$onInitの方が、他の種類の初期化に適していますか？要素上のすべてのコントローラが構築されており、それらのバインディングが初期化されていた（そしてこの要素のディレクティブの機能を結ぶ前&ポスト前）の後に、各コントローラに呼び出され

Answer 1

$のOnInit

。これはあなたのコントローラの初期化コードを置くのに適しています。

$ onChanges

$ onChangesのライフサイクルフックはいくつかの理由のために呼び出されます。最初のものは、コンポーネントの初期化です。実行時にオブジェクトの初期変更オブジェクトを渡すので、データをすぐに取得できます。 2番目の理由は、親コンポーネントからバインドされている「<」（単方向データバインド）と「@」（評価されたDOM属性値の場合）に変更が発生した場合のみです。 $onChangesが呼び出されると、特別な変更を加えたObject backを得ることができます。これについては、今後のセクションで説明します。

主な実用的な違いは$onInitのみディレクティブの初期化に呼び出されますが、$onChangesが初期化およびとき<と@変数の変更時に呼び出されますです。