javascript - Cómo observar cambios en el enlace de un componente usando un componente de Angular

¿Cómo puedo escuchar el cambio de enlace de un componente de Angular y realizar acciones?

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

ahora, cuando items cambie, quiero realizar otra acción usando este valor,
¿Cómo puedo hacerlo?

Respuesta #1

Puedes agregar el método $onChanges al controlador

$onChanges(changesObj) se llama cada vez que se actualizan los enlaces unidireccionales. El changesObj es un hash cuyos claves son los nombres de las propiedades enlazadas que han cambiado, y los valores son un objeto del siguiente formato.

El siguiente ejemplo maneja el evento de cambio 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'
});

Requiere AngularJS >= 1.5.3 y funciona solo con enlace de datos unidireccional (como en el ejemplo anterior).

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

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

Respuesta #2

Ahora, cuando los elementos cambian, quiero realizar otra acción usando este valor. ¿Cómo puedo hacerlo?

Pero quiero evitar usar el $scope moribundo

Si no quieres usar $scope puedes usar un setter de propiedad para detectar cualquier cambio, por ejemplo:

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

Tenga en cuenta que no debería usarlo para lógica compleja (razones: https://basarat.gitbooks.io/typescript/content/docs/tips/propertySetters.html) 🌹