$watch amb Angular 2

En el meu post anterior, vaig estar parlant sobre com implementar esdeveniments d'Angular 1 en Angular 2. Però en el fragment de codi que utilitzo com a exemple podem trobar una altra cosa que no existeix en Angular 2: $watch.

Començo definint el problema. Podem tenir una directiva o component d'Angular 1 com aquest:

var module = angular.module("myApp");

module.directive('exampleDirective', function () {
  return {
    template: '<div>{{internalVar}}</div>',
    scope: {
      externalVar: "="
    },
    controller: function(scope, element) {
      scope.$watch('externalVar', function(newVal, oldVal) {
        if (newVal !== oldVal) {
          scope.internalVar = newVal;
        }
      });
    }
});

Si volem migrar aquest codi a Angular 2 trobem un problema: el nou Angular no té scope, així que no té $watch. Com podem observar un atribut de directiva? La solució és la sintaxi set d'ES6.

La sintaxi set vincula una propietat d'objecte a una funció per ser cridada quan hi ha un intent d'establir aquesta propietat.

De MDN

Així que podem vincular l'entrada per a un component a una funció que fa el mateix que la funció $watch.

import { Component, Input } from "@angular/core";

@Component({
  selector: "example-component",
})
export class ExampleComponent {
  public internalVal = null;

  constructor() {}

  @Input("externalVal")
  set updateInternalVal(externalVal) {
    this.internalVal = externalVal;
  }
}