Compartilhando Dados entre Componentes no Angular
No Angular, é comum a necessidade de compartilhar dados entre componentes. Isso pode ser feito utilizando @Input e @Output para comunicação direta entre componentes relacionados (pai e filho) e Services para dados compartilhados de forma global ou entre componentes não diretamente relacionados.
Exemplo Prático
Neste exemplo, criaremos uma aplicação com:
- Um componente Pai para exibir e atualizar dados.
- Um componente Filho para receber dados e emitir eventos ao Pai.
- Um Serviço para compartilhar dados entre os componentes.
Estrutura do Projeto
- Pai: Exibe e atualiza os dados.
- Filho: Recebe dados e emite eventos.
- Serviço: Mantém os dados compartilhados.
1. Criar o Serviço (data.service.ts)
O serviço é responsável por armazenar e emitir valores compartilhados:
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class DataService {
private dataSubject = new BehaviorSubject<string>('Valor inicial');
data$ = this.dataSubject.asObservable();
updateData(newData: string) {
this.dataSubject.next(newData);
}
}
BehaviorSubject: Permite armazenar e emitir valores.updateData: Atualiza o valor compartilhado.
2. Criar o Componente Filho (child.component.ts)
HTML:
<div>
<p>Dados do pai: {{ inputData }}</p>
<button (click)="sendToParent()">Enviar para o Pai</button>
</div>
TypeScript:
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent {
@Input() inputData!: string;
@Output() outputEvent = new EventEmitter<string>();
sendToParent() {
this.outputEvent.emit('Mensagem do Filho!');
}
}
- @Input: Recebe dados do Pai.
- @Output: Emite eventos para o Pai.
3. Criar o Componente Pai (app.component.ts)
HTML:
<div>
<h2>Componente Pai</h2>
<p>Dados do Serviço: {{ serviceData }}</p>
<app-child
[inputData]="parentData"
(outputEvent)="handleChildEvent($event)"
></app-child>
<button (click)="updateData()">Atualizar Dados</button>
</div>
TypeScript:
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
parentData = 'Dados do Pai';
serviceData!: string;
constructor(private dataService: DataService) {}
ngOnInit() {
this.dataService.data$.subscribe(data => {
this.serviceData = data;
});
}
handleChildEvent(event: string) {
console.log('Recebido do Filho:', event);
}
updateData() {
this.dataService.updateData('Novo valor do Serviço');
}
}
Explicação das Técnicas Utilizadas
@Input e @Output
- @Input: Passa dados do Pai para o Filho.
- @Output: Permite ao Filho enviar eventos de volta ao Pai.
Serviço
- O
DataServicearmazena e compartilha dados de forma centralizada. - Pode ser usado por qualquer componente para acessar ou modificar os dados.
Resultado Final
- O componente Pai envia dados ao Filho via
@Input. - O componente Filho responde ao Pai usando
@Output. - Um serviço compartilha dados de forma global entre os componentes.
