24. Partage de données entre composants via des services

Nous avons découvert @Input et @Output pour la communication parent-enfant. Mais qu'en est-il de la communication entre des composants qui n'ont pas de lien direct (frères, cousins ou composants éloignés) ? Les services offrent le mécanisme parfait pour cela, en tirant parti de la nature singleton des services fournis à la racine.

Le service de données partagées

Nous allons créer un service qui contient des données et fournit des méthodes pour que les composants puissent mettre à jour ou récupérer ces données.

typescript // shared-state.service.ts import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' }) export class SharedStateService { private messageSource = 'Message initial';

getMessage(): string { return this.messageSource; }

updateMessage(newMessage: string): void { this.messageSource = newMessage; } }

1. Composant A (L'expéditeur)

typescript // sender.component.ts constructor(private stateService: SharedStateService) { }

sendUpdate(input: string) { this.stateService.updateMessage(input); }

2. Composant B (Le destinataire)

typescript // receiver.component.ts public currentMessage: string;

constructor(private stateService: SharedStateService) { this.currentMessage = this.stateService.getMessage(); }

// Nous avons besoin d'un moyen de détecter les changements... // Dans les prochaines leçons, nous utiliserons RxJS (Observables) pour rendre cela dynamique et réactif. // Pour l'instant, ce composant devra être rafraîchi ou vérifié manuellement.

Limitation : La méthode ci-dessus n'est pas réactive ; le composant B doit appeler activement getMessage() pour récupérer la donnée. Les leçons suivantes sur RxJS résoudront ce problème en permettant aux services de notifier les composants des changements de manière asynchrone.