javascript - Kuinka seurata komponentin sitoutumisen muutosta Angular-komponenttia käyttäen

Miten voin kuunnella Angular-komponentin sidonnan muutosta ja suorittaa toimintoja?

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

nyt kun items muuttuu, haluan suorittaa toisen toiminnon käyttäen tätä arvoa,
Miten voin tehdä sen?

Vastaus #1

Voit lisätä $onChanges-metodin kontrolleriin

$onChanges(changesObj) kutsutaan aina, kun yksisuuntaiset sidokset päivitetään. changesObj on hajautustaulu, jonka avaimet ovat muuttuneiden sidottujen ominaisuuksien nimiä, ja arvot ovat muodossa oleva objekti.

Seuraava esimerkki käsittelee canChange-muutostapahtumaa.

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

Vaatii AngularJS-version >= 1.5.3 ja toimii vain yksisuuntaisen tietojen sitomisen kanssa (kuten yllä olevassa esimerkissä).

Dokumentaatio: https://docs.angularjs.org/guide/component

Viite: http://blog.thoughtram.io/angularjs/2016/03/29/exploring-angular-1.5-lifecycle-hooks.html

Vastaus #2

nyt kun kohteet muuttuvat, haluan suorittaa toisen toiminnon käyttämällä tätä arvoa, miten voin tehdä sen?

Mutta haluan välttää kuolevan $scope:n käyttöä

Jos et halua käyttää $scope, voit käyttää ominaisuuden asettajaa havaitaksesi muutokset, esimerkiksi:

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

Huomaa, että sitä ei tulisi käyttää monimutkaiseen logiikkaan (syyt: https://basarat.gitbooks.io/typescript/content/docs/tips/propertySetters.html) 🌹