Workflow con Components Angular

La Abstracción es un concepto de la POO muy poderoso que define características especificas que puede tener un objeto. Y en Angular también podemos aplicar ese concepto, en este caso lo aplicaremos para poder hacer un flujo de comunicación entre componentes.

Primero definimos la clase abstracta.

Luego cada Componente que quisiéramos integrar en el flujo tendrá que Heredar las características de la clase Abstracta anteriormente creada.

Ahora necesitamos que el Componente Contenedor donde están los Componentes Heredados de la Clase Abstracta , obtenga la referencia de cada Componente.

Para el control de nuestro flujo creamos un Servicio que controlara la inicialización y la obtención de datos de cada Componente instanceado.

Ahora agregamos cada componente a el Servicio y inicializamos el flujo.

Cuando inicie el Flujo el Servicio se encargará de llamar al método initial() del primer Componente (ComponentA), este terminando su proceso se emitirá un Evento con resolve.next() continuando el flujo y enviando los datos requeridos al siguiente Componente de el Flujo (ComponentB) y así hasta terminar el flujo.

(initial(), resolve.next() son propiedades de la clases abstracta). 

Estos métodos harán que el flujo sea fluido y cada componente comparte los datos entre ellos.

Como vimos la Clase Abstracta ayudo a el Servicio a saber como es el comportamiento de dichos componentes e interactuar con ellos solo utilizando los métodos o propiedades que conocemos por la Clase Abstracta.

Les comparto un ejemplo en este repositorio .

Gracias.