角度コンポーネントを使用してコンポーネントバインディングの変更を確認する方法

Question

角度コンポーネントのバインディングの変更をリッスンしてアクションを実行するにはどうすればよいですか？

今

angular.module('myapp') 
    .component('myComponent', { 
     templateUrl: 'some.html', 
     controller: MyController, 
     controllerAs: 'myCtrl', 
     bindings: { 
      items: '<' 
     } 
    }); 

私は、この値を使用して別のアクションを実行したいitems変更、
はどのように私はそれを行うことができますか？

Answer 1

アイテムが変更されたら、この値を使用して別のアクションを実行したい どうすればいいですか？

しかし、私はあなたが、例えば任意の変化を検出するために、プロパティセッターを使用することができます$scope使用する必要はありません場合は死ん$の範囲に

を使用しないようにしたいです：

class MyController { 
    private _items: string[] = [] 
    set items(value:string[]){ 
     this._items = value; 
     console.log('Items changed:',value); 
    } 
    get items():string[]{ 
     return this._items; 
    } 
} 

const ctrl = new MyController(); 
ctrl.items = ['hello','world']; // will also log to the console 

あなたは複雑なロジック（の理由：https://basarat.gitbooks.io/typescript/content/docs/tips/propertySetters.html）のためにそれを使用してはならないことに注意してください：Object.defineProperty()を使用して

function MyController() { 
    var items = []; 

    Object.defineProperty(this, 'items', { 
    get: function() { 
     return items; 
    }, 

    set: function(newVal) { 
     items = newVal; 
     console.log('Items changed:', newVal); 
    } 
    }); 
} 

Answer 2

私は方法を発見しましたが、それが最も効率的であるかどうかはわかりません。まず$スコープを依存関係として持ち込み、コンストラクタのthis._scopeなどに設定します。私は私の$onInit機能で、次があります。

this._scope.$watch(() => { 
    return this.items; 
    }, 
    (newVal, oldVal) => { 
    // Do what you have to here 
    }); 

それは非常ここでは答えに触発されています：Angularjs: 'controller as syntax' and $watch

は、それはそれは私が私がそう言われてるまで使用しようとしてんだよ、お役に立てば幸いです。

Answer 3

現在、変更の検出は$ scopeに基づいているため、$ scopeなしの角度ウォッチャーを使用することはできません。 HTMLで式を使用しても、delegate watch functionality to $scopeとなります。

他のメカニズムを作成して手動でアンワッチすることを覚えておく必要がありますが、$ scopeを使って自動的に行われます。

Answer 4

ここbasarat's answerのES5.1のバージョンがあります。すべての主要なブラウザとIE9 +でサポートされています。

Answer 5

あなたは一方向のバインディングが更新されるたび

$onChanges(changesObj)が呼び出されたコントローラへ$onChangesメソッドを追加することができます。 changesObjは変更されたバインドされたプロパティの名前をキーとするハッシュであり、値はフォームのオブジェクトです。

次の例では、変更イベントcanChangeを処理します。

angular.module('app.components', []) 
 
.component('changeHandler', { 
 
    controller: function ChangeHandlerController() { 
 
    $onChanges: function (changes) { 
 
     if (changes.canChange) 
 
     this.performActionWithValueOf(changes.canChange); 
 
    }; 
 
    }, 
 
    bindings: { 
 
    canChange: '<' 
 
    }, 
 
    templateUrl: 'change-handler.html' 
 
});

AngularJS> = 1.5.3を必要とするだけの一方向データ結合（上記の例のように）でを動作します。

ドキュメント：https://docs.angularjs.org/guide/component

参考：あなたの答えのためのhttp://blog.thoughtram.io/angularjs/2016/03/29/exploring-angular-1.5-lifecycle-hooks.html