Maneira mais simples de compartilhar dados entre dois componentes não relacionados no Angular

Em Angular, é essencial saber como os componentes se comunicam entre si. Se você usar um componente dentro de outro componente, eles criarão um relacionamento pai-filho.  Nesse cenário, os componentes pai e filho se comunicam entre si das seguintes maneiras:

• @Entrada()
• @Saída()
• Variável de referência de temperatura
• ViewChild and ContentChild

Você pode aprender em detalhes sobre @Input aqui e @Output aqui. Nesta postagem do blog, você aprenderá como os dados podem ser compartilhados entre componentes que não estão relacionados entre si usando o Angular Service.

Para entender isso usando um exemplo, crie um serviço.  No serviço, crie uma variável chamada count.  O serviço compartilhará o valor da variável de contagem entre os componentes. Antes de criarmos a variável de contagem, vamos falar sobre o requisito novamente. Queremos que todos os componentes acessem o último valor atualizado dos dados compartilhados usando o serviço.

Para isso, temos que envolver a variável count em assuntos RxJS. Para ser mais preciso, vamos usar BehaviorSubject.

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

Estamos usando BehaviorSubject pelos seguintes motivos:

1. Os dados do serviço devem ser multicast. Cada componente do consumidor deve acessar a mesma cópia dos dados. Para isso,BehaviorSubject é usado.
2. Não estamos usando observáveis, pois eles são de natureza unicast. Os assinantes terão sua própria cópia dos dados.
3. BehaviorSubject armazena o valor atual. Portanto, o componente sempre lerá o valor atual dos dados armazenados em BehaviorSubject.

Juntando tudo, o serviço para compartilhar dados simples será semelhante à próxima listagem de código:

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);
    }
}

Agora os componentes podem consumir o serviço para acessar dados compartilhados. Por exemplo, em um componente, o serviço pode ser consumido conforme mostrado na próxima listagem:

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

Estamos assinando o serviço e lendo o valor de count na variável local. Além disso, há uma função que incrementa a contagem.  No modelo, você pode exibir e incrementar dados compartilhados, conforme mostrado na próxima listagem de código:

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

Dessa forma, você pode consumir o serviço no maior número possível de componentes e em todos os lugares em que eles compartilharão os mesmos dados do serviço. Para sua referência, você pode encontrar stackblitz de trabalho aqui:

Na minha opinião, esta é a maneira mais simples de compartilhar dados entre componentes não relacionados em Angular. Tenho certeza de que existem maneiras melhores para cenários mais complexos. Por favor, sugira algumas ideias nos comentários abaixo se você souber de outras opções.