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

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

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

Отладка Angular в VS Code

Настройка Visual Studio Code используя расширение Debugger for Chrome для отладки Angular приложений
03 декабря 2017 г. в Angular

Angular Storybook

Установите пакет npm i @storybook/cli -g и запустите команду sb init в корне angular проекта.

30 октября 2018 г. в Angular

Angular. Functions & getters в шаблонах

На каждый цикл механизма обнаружения изменений выполняется метод из шаблона. Если этого надо избежать, то следует использовать pure pipe или результат выполнения присвоить свойству компонента