Angular Сообщите другим компонентам, что произошли изменения без использования интервалов

Question

У меня сейчас есть что-то вроде этого в компоненте нижнего колонтитула моего проекта

ngOnInit() {

    const checkLocalStorage = interval(15000);
        checkLocalStorage.subscribe(data => {
        // code for checking the Localstorage
    });

}

Мне не нравится идея, что таймеры циклически проверяют изменения каждые столько секунд.

Мне нужен простой, чистый способ передачи сообщений другим компонентам (не связанным компонентам).

Я знаю о RxStore сложно.

У меня есть простой способотправить простое сообщение другому компоненту, говорящему ему запустить метод в его компоненте?

Как я могу сделать это без использования интервала или другого цикла?

Answer 1

Используйте эту службу событий для связи между компонентами.

import { Injectable } from '@angular/core';
import { Subject, Observable, Subscription } from 'rxjs';

const ServiceName: string = "Events Service";

@Injectable()
export class EventsService implements IEventsService {
    private events = { };

    constructor() { }

    public subscribe(event: string): Observable<any>;
    public subscribe(event: string, callback: (value: any) => void): Subscription;  
    public subscribe(event: string, callback: (value: any) => void, error: (error: any) => void): Subscription;
    public subscribe(event: string, callback: (value: any) => void, error: (error: any) => void, complete: () => void): Subscription;
    public subscribe(event: string, callback?: (value: any) => void, error?: (error: any) => void, complete?: () => void) {
        if (!event) {
            throw new Error(`[${ServiceName}] => Subscription method must get event name.`);
        }

        if (this.events[event] === undefined) {
            this.events[event] = new Subject<any>();
        }

        if (typeof callback !== 'function') {
            return this.events[event].asObservable();
        } else {
            return this.events[event].asObservable().subscribe(callback, error, complete);
        }
    }

    public publish(event: string, eventObject?: any) {
        if (!event) {
            throw new Error(`[${ServiceName}] => Publish method must get event name.`);
        } else if (!this.events[event]) {
            return;
        }

        this.events[event].next(eventObject);
    }
}

export interface IEventsService {
    publish(event: string, eventObject?: any);
    subscribe(event: string): Observable<any>;
    subscribe(event: string, callback: (value: any) => void): Subscription;
    subscribe(event: string, callback: (value: any) => void, error: (error: any) => void): Subscription;
    subscribe(event: string, callback: (value: any) => void, error: (error: any) => void, complete: () => void): Subscription;
}

interface ISubscribe{
    (event: string): Observable<any>;
    (event: string, callback: (value: any) => void): Subscription;
    (event: string, callback: (value: any) => void, error: (error: any) => void): Subscription;
    (event: string, callback: (value: any) => void, error: (error: any) => void, complete: () => void): Subscription;
}

Как использовать эту службу:

публикация события из компонента XYZ

   publishNewEvent(){
     this.eventsService.publish("PROFILE_UPDATED");
   }

подписка насобытие в компоненте ABC

constructor(private eventsService: EventsService){
   this.eventsService.subscribe("PROFILE_UPDATED", () => {
      console.log("Called");
   });
}

Answer 2

Это то, для чего создано Angular Component Interaction . Использование @Input для передачи данных в компонент и @Output для уведомления родителя о событии childs.

Если у вас есть структура приложения, которая делает это слишком сложным, вам следует подумать об использовании Redux .

Если это слишком сложно или слишком сложно для этого, вы можете написать простую услугу. Эта служба должна предоставлять Observable, на который подписывается ваш компонент нижнего колонтитула. Из другого компонента теперь запускается функция в сервисе, которая доставляет следующее значение в Observable.

Answer 3

Самый простой способ - использовать HTML CustomEvents

Прослушивание события:

document.addEventListener('my-event', () => {
  console.log('My event !');
});

Событие отправки:

document.dispatchEvent( new CustomEvent('my-event') );