Какими способами можно передавать данные между двумя одноуровневыми Angular-компонентами?

Введение в проблему

В Angular компоненты часто должны обмениваться данными, особенно когда они находятся на одном уровне и не имеют прямого родительско-дочернего отношения. Прямая передача через @Input и @Output возможна только через общего родителя, что усложняет архитектуру. Поэтому используются альтернативные подходы, основанные на сервисах и реактивном программировании.

Основные способы передачи данных

• Общий сервис с RxJS Subject — сервис инжектируется в оба компонента, один вызывает метод для отправки данных, другой подписывается на поток.
• Глобальное состояние (NgRx, Akita) — централизованное хранилище, где компоненты диспатчат действия и выбирают данные через селекторы.
• Через родительский компонент — родитель передаёт данные одному компоненту через @Input, а получает изменения через @Output, затем передаёт их другому.
• Сервис с публичными свойствами — простой сервис с переменными, но без реактивности, что менее удобно для динамических обновлений.

Пример с общим сервисом

// data.service.ts
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class DataService {
  private dataSubject = new Subject<string>();
  data$ = this.dataSubject.asObservable();

  sendData(data: string) {
    this.dataSubject.next(data);
  }
}

// component-a.ts
send() {
  this.dataService.sendData('Hello from A');
}

// component-b.ts
ngOnInit() {
  this.dataService.data$.subscribe(data => console.log(data));
}

Здесь сервис объявлен как синглтон (providedIn: 'root'), поэтому оба компонента получают один и тот же экземпляр. Компонент A вызывает sendData, а компонент B подписан на поток и получает обновления.

Когда какой способ выбирать

Для простых случаев достаточно общего сервиса с Subject. Если приложение большое и требует предсказуемого управления состоянием, лучше использовать NgRx. Передача через родителя оправдана, если компоненты уже находятся в одном контейнере и связь не должна быть глобальной.

Вывод

Общий сервис с RxJS — это гибкий и простой способ для обмена данными между одноуровневыми компонентами, который легко масштабируется. Для сложных приложений стоит рассмотреть централизованное хранилище, но для большинства задач сервис достаточен.