Como comentaba en una publicación anterior, ahora veremos una forma de comunicación entre dos componentes de AngularJS que forman parte de otro componente intermediario.

Tenemos un componente de evaluación

const EvaluationComponent: ng.IComponentOptions = {
  controller: EvaluationController,
  template: `
  <survey data="$ctrl.data"></survey>
  <chart data="$ctrl.data"></chart>
  `,
}

y su controlador

class EvaluationController implements ng.IController {
  data: EvaluationData;

  constructor() {
    this.data = {
      amount: 0,
    };
  }
}

Notemos que este componente se sirve de otros dos para poder ingresar datos y luego mostrarlos respectivamente. Así pues, la manera más sencilla de pasar información entre componentes es tener un padre común, EvaluationComponent, que inicie este contenedor de datos y lo comparta a su jerarquía de subcomponentes, como es el caso de ChartComponent y SurveyComponent.

const ChartComponent: ng.IComponentOptions = {
  bindings: {
    data: '=',
  },
  controller: ChartController,
  template: `
  <label>chart: {{ $ctrl.data.amount }}</label>
  <button ng-click="$ctrl.next()">Next</button>
  `,
};
const SurveyComponent: ng.IComponentOptions = {
  bindings: {
    data: '=',
  },
  template: `
  survey:
  <input
    ng-model="$ctrl.data.amount"
    value="$ctrl.data.amount"
  >
  `,
};

En el caso de SurveyComponent, el monto se actualiza desde el formulario, mientras que ChartComponent lanza un evento clic

class ChartController {
  data: EvaluationData;

  next() {
    this.data.amount++;
  }
}

El ejemplo completo puede verse aquí.

Anuncios