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

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

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

Как добавить ng-bootstrap компоненты в проект Angular-CLI?

Покажу на примере нового проекта.

ng new project_name
cd project_name
npm install --save bootstrap@next
npm install --save @ng-bootstrap/ng-bootstrap

В angular-cli.json в секцию style надо добавить наш CSS, чтобы глобально подключить стили.

  "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
17 августа 2017 г. в Angular