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

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

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

@Directive v/s @Component in Angular

Компоненты создают DOM элементы и добавляют к ним поведение, а директивы только добавляют поведение к существующим DOM элементам

13 августа 2018 г. в Angular

ngx translate attribute

Используется конструкция

<img src="image.jpg" [alt]="'KEY' | translate"> 
20 августа 2018 г. в Angular

Angular URL Matcher

Функция сопоставления маршрута с URL-адресами. Возможность динамически подбирать компонент для маршрута

04 октября 2020 г. в Angular