Categoría: Angular

El problema

Una de las ventajas de usar Angular llega a ser a su vez un lío al momento de compartir información entre componentes no relacionados, es decir para pasar datos de un componente padre a un componente hijo tenemos el famoso @Input y para compartir información de un hijo a un padre podemos usar un @Output que al final del día es un EventEmitter. Pero, ¿qué sucede cuando queremos usar la información de un componente que no está relacionado directamente? Esto es útil cuando nuestros datos (variable data) se encuentren en algún componente, pero nosotros requerimos esa información en un componente muy inferior o que no tiene relación directa. Podríamos tener una cadena de @Input tras @Input hasta llegar al componente que requiere la información, pero esto sólo funcionaría si estos componentes estuvieran en forma de cascada uno dentro de otro como podemos ver en esta ilustración:

 

Pero además de que en algún momento ese código podría ser poco sostenible, tenemos el problema de que al usar estos inputs en ocasiones no se lleva a cabo de manera correcta el change detection de Angular, por lo que podríamos tener que llenar nuestra aplicación de timeouts y eso no es correcto (o Zones que dan un mecanismo más avanzado para este tipo de situaciones).

La solución

Hoy vamos a usar un operador que nos provee la librería de ReactiveX, que junto con Angular nos facilita mucho el poder compartir información entre componentes.

En este ejemplo compartiremos un arreglo de números.

Lo primero que vamos a hacer es crear un servicio e importar el operador BehaviorSubject.

import {Injectable} from '@angular/core';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';

@Injectable()
export class SharingDataService {
data: Array<any> = [];

y creamos una variable la cual será nuestra manera de comunicarnos con los demás componentes o servicios que requieran la información.

Primero asignados a una variable un new BehaviorSubject<>() para posteriormente asignar esta variable como un Observable.

public _dataSource = new BehaviorSubject<Array<any>>([]);
dataSource$ = this._dataSource.asObservable();

La variable _dataSource la usaremos para poder indicarle a todos los elementos suscritos a nuestro observable que tenemos información y nuestra otra variable dataSource$ será con la cual nosotros podremos suscribirnos a la información.

pongamos un ejemplo

Ahora cómo podemos hacer que el componente principal transmita la información a los demás? pues crearemos una función para esto dentro de nuestro servicio, algo como esto:

public setData(data:Array<any>){
   this.data = data;
   this._dataSource.next(data);
}

Podemos ver que estamos usando la variable _dataSource que es nuestro BehaviorSubject con un .next esto lo que nos permite es alertar a todos los suscriptores que esperan por información pasando como parámetro la información que queremos transmitir.

Ahora viene la otra parte, ¿como consumo la información que el BehaviorSubject está transmitiendo? bueno para esto dentro de nuestro componente importamos otro operador de ReactiveX llamado ‘Subscription’ y el servicio que creamos antes.

import {Subscription} from "rxjs/Subscription";
import {SharingDataService} from "./sharingDataService";

y declaramos nuestra variable del mismo tipo, y nuestro servicio en el constructor:

dataSubscription: Subscription;
data: Array<number>

constructor(public _sharingDataService:SharingDataService){
}

y dentro de nuestro ngOnInit realizamos la suscripción a la variable a la cual asignamos el BehaviorSubject como Observable.

public ngOnInit() {
    this.dataSubscription = this._sharingDataService.dataSource$
    .subscribe(data => {
        this.data = data;
     });
}

y con esto nuestros componentes podrán compartir la información con cualquier otro componente o servicio que este suscrito a nuestro BehaviorSubject.

solo no olvides desuscribirte cuando destruyas el componente ya que consumiría recursos y no los estaríamos usando.

public ngOnDestroy(): void {
    this.dataSubscription.unsubscribe();
}