Взаимодействие не связанных компонентов Angular 9

Question

Есть компонент MainLayoutComponent в котором есть календарь. Календарь размещен в toolbar. Задача: при изменении даты в календаре перестроить таблицу, которая находится в TaskPageComponent. Как сделать? Сделал сервис TaskService в нем написал:

 private _mainRangeDates: Date[] = [
    moment().startOf('month').toDate(),
    moment().endOf('month').toDate()
  ];

  private dateSubject$ = new BehaviorSubject<Date[]>(this._mainRangeDates);
  mainRangeDatesChange$ = this.dateSubject$.asObservable();

  // Установить значение
  setMainRangeDates(date: Date[]) {
    this._mainRangeDates = date;
    this.dateSubject$.next(this._mainRangeDates);
  }

В MainLayoutComponent написал :

  onClickOutside(event: any) {
    if (!this.rangeDates[1]) {
      this.rangeDates = [
        this.rangeDates[0],
        this.rangeDates[0]
      ];
    }

    this.taskService.setMainRangeDates(this.rangeDates);
  }

В сервис данные передаються. Как теперь с сервиса перестроить таблицу в компоненте TaskPageComponent? Как с сервиса получить измененное значение, а не то что установлено по-умолчанию?

Answer 1

В сервисе делаем публичным BehaviorSubject

dateSubject$ = new BehaviorSubject<Date[]>(this._mainRangeDates);

В другом компоненте подписываемся на него

this.taskService.dateSubject$
  .pipe(takeUntil(this.unsubscribe$))
  .subscribe(dates => console.log(dates));

Обратите внимание на необходимость отписок

.pipe(takeUntil(this.unsubscribe$))

В компоненте есть приватная переменная

private unsubscribe$ = new Subject();

которая уничтожается в ngOnDestroy

ngOnDestroy(): void {
  this.unsubscribe$.next();
  this.unsubscribe$.complete();
}

БЛОГ НА HUSL

Взаимодействие не связанных компонентов Angular 9

Ответы (1 шт):