TS. Event bus

Создаётся providedIn: 'root' сервис событий. Затем отправляются события на шину, и если какой-либо слушатель подписан на эти события, он получает уведомления.

Шина событий необходима для коммуникации между независимыми компонентами, например получения событий из компонентов дополнительного аутлета или сбор метрик из приложения для отправки в яндекс метрику и google analytics.

export const enum EventType {
  EVENT_1 = 'event_1',
  EVENT_2 = 'event_2',
  EVENT_3 = 'event_3',
}

export interface BusEvent<T = any> {
  type: EventType;
  payload: T;
}

@Injectable({
  providedIn: 'root',
})
export class EventbusService {
  private _eventSubject = new Subject<BusEvent>();

  /**
   * Subscribe to event
   * @param type - event type
   */
  public on<T = any>(type: EventType): Observable<T> {
    return this._eventSubject.pipe(
      filter(event => event.type === type),
      map(event => event.payload)
    );
  }

  /**
   * Push next event
   * @param event - event name
   */
  public next(event: BusEvent): void {
    this._eventSubject.next(event);
  }
}

Стоит отметить, что есть специальные библиотеки для решения подобных задач: Akita, NGXS или NGRX, но не всегда есть необходимость в их использовании.

Классический вариант реализации шины событий из статьи Communicate Between Angular Components Using RxJS

Event Bus Service

Не нравится т.к. не позволяет реализовать декларативную отписку.

Похожие записи

#local variable внутри *ngIf

Представлены 2 варианта решения, как сослаться на локальную переменную шаблона (#myVar) за пределами шаблона:

  • @ViewChild
  • @ViewChildren
13 февраля 2019 г. в Angular

Вставить <script> в Angular компонент

Добавление сторонних скриптов в Angular по запросу. Как известно, добавить скрипт через шаблон невозможно. Представлено решение как это сделать программно.

16 ноября 2019 г. в Angular