web-dev-qa-db-ja.com

Angular componentを使用してコンポーネントバインディングの変更を監視する方法

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

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

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

javascriptangularjstypescriptangularjs-components
34
Dor Cohen

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

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

してはいけない$scopeプロパティsetterを使用して、変更を検出できます。 ：

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 ）????

27
basarat

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

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

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

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

1.5.3以上のAngularJSが必要であり、一方向データバインディングでのみ機能します（上記の例のように）。

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

リファレンス： http://blog.thoughtram.io/angularjs/2016/03/29/exploring-angular-1.5-lifecycle-hooks.html

57
David Remie

ES-5.1バージョンの basaratの答え ：

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 +でサポートされています。

7
jfrej

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

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

ここでの回答に非常に触発されています： Angularjs： 'controller as syntax' and $ watch

それが役立つことを願って、それが私がそうでないと言われるまで、私が使うつもりであるものです。

3
Chris

現在、変更検出は$ scopeに基づいているため、$ scopeなしではangular watchersを使用できません。HTMLで式を使用しても、監視機能をデリゲートします $ scope .

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

0
m1gu3l