41

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

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

変更があった場合items、この値を使用して別のアクションを実行したいのですが、
どうすればよいですか?

4

6 に答える 6

66

$onChangesメソッドをコントローラーに追加できます

$onChanges(changesObj)一方向バインディングが更新されるたびに呼び出されます。changesObj は、キーが変更されたバインドされたプロパティの名前であり、値がフォームのオブジェクトであるハッシュです。

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

angular.module('app.components', [])
.component('changeHandler', {
  controller: function ChangeHandlerController() {
    this.$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

于 2016-05-05T11:16:02.797 に答える
29

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

しかし、死にかけている $scope の使用は避けたい

使用したくない場合$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 )

于 2016-03-08T05:29:18.337 に答える
7

バサラトの答えのES5.1バージョンは次のとおりです。

function MyController() {
  var items = [];

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

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

Object.defineProperty()を使用します。すべての主要なブラウザーと IE9+ でサポートされています。

于 2016-04-27T13:01:25.723 に答える
0

現在、変更検出は $scope に基づいているため、$scope なしで angular ウォッチャーを使用することはできません。HTML で式を使用する場合でも、監視機能を $scope に委譲します。

監視するための他のメカニズムを作成したとしても、手動で監視を解除することを忘れないでください - $scope を使用すると、自動的に行われます。

于 2016-03-07T21:23:38.960 に答える