La forma más sencilla de compartir datos entre dos componentes no relacionados en Angular

En Angular, es fundamental saber cómo se comunican los componentes entre sí. Si utiliza un componente dentro de otro componente, se crea una relación padre-hijo.  En tal escenario, los componentes primarios y secundarios se comunican entre sí de las siguientes maneras:

• @Aporte()
• @Producción()
• Variable de referencia de temperatura
• ViewChild and ContentChild

Puede obtener información detallada sobre @Input aquí y @Output aquí. En esta entrada de blog, aprenderá cómo se pueden compartir datos entre componentes que no están relacionados entre sí mediante Angular Service.

Para entender esto usando un ejemplo, cree un servicio.  En el servicio, cree una variable denominada count.  El servicio compartirá el valor de la variable count entre los componentes. Antes de crear la variable count, hablemos de nuevo de los requisitos. Queremos que todos los componentes accedan al último valor actualizado de los datos compartidos mediante el servicio.

Para esto, tenemos que envolver la variable count en asuntos RxJS. Para ser precisos, usemos BehaviorSubject.

counter = 1;
count: BehaviorSubject<number>;
constructor() {
   this.count = new BehaviorSubject(this.counter);
}

Estamos usando BehaviorSubject por las siguientes razones:

1. Los datos del servicio deben ser de multidifusión. Cada componente de consumidor debe tener acceso a la misma copia de los datos. Para este propósito, se utiliza BehaviorSubject.
2. No estamos usando observables, ya que son de naturaleza unidifusión. Los suscriptores tendrán su propia copia de datos.
3. BehaviorSubject almacena el valor actual. Por lo tanto, el componente siempre leerá el valor actual de los datos almacenados en BehaviorSubject.

Poniendo todo junto, el servicio para compartir datos simples se verá como la siguiente lista de códigos:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
 
@Injectable({
    providedIn: 'root'
})
export class AppService {
    counter = 1;
    count: BehaviorSubject<number>;
    constructor() {
 
        this.count = new BehaviorSubject(this.counter);
    }
 
    nextCount() {
        this.count.next(++this.counter);
    }
}

Ahora los componentes pueden consumir servicio para acceder a datos compartidos. Por ejemplo, en un componente, el servicio se puede consumir como se muestra en la siguiente lista:

export class Appchild2Component implements OnInit {
 
    count: number;
    constructor(private appsevice: AppService) {
    }
    ngOnInit() {
 
        this.appsevice.count.subscribe(c => {
            this.count = c;
        });
    }
    nextCount() {
        this.appsevice.nextCount();
    }
}

Nos suscribimos al servicio y leemos el valor de count en la variable local. Además, hay una función que incrementa el recuento.  En la plantilla, puede mostrar e incrementar los datos compartidos como se muestra en la siguiente lista de códigos:

<h2>Count in component2  =  {{ count }}</h2>
<button (click)='nextCount()'>Next Count from component2</button>

De esta manera, puede consumir el servicio en tantos componentes como sea posible y en todos los lugares compartirán los mismos datos del servicio. Para su referencia, puede encontrar stackblitz en funcionamiento aquí:

En mi opinión, esta es la forma más sencilla de compartir datos entre componentes no relacionados en Angular. Estoy seguro de que hay mejores formas para escenarios más complejos. Por favor, sugiera algunas ideas en los comentarios a continuación si conoce otras opciones.