Как я могу выдать объект изменений как субъект и подписаться только на одно изменение ключа?

Question

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

Дело в том, что мы не знаем лучшую архитектуру для субъекта, должна ли это быть единичная строка или объект?

Если мы испускаем объект всех изменений в качестве ключа:пары значений, как мы подписываемся только на одно из этих изменений в другом месте, вместо того, чтобы реагировать на весь объект?

Я хочу отменить загрязнение моего кода с помощью Subject emitter для каждого изменения или это "лучшая практика"

Пример текущей реализации

Emitter

/**
 * A function that emits an RXJS event to any observers subscribed to this subjet
 * when the user changes the calendar in the sidebar.
 * @return {Observable} An Observable that, whenever subscribed, will execute the
 * specified function.
 * @static false
 */
public emitCalendar = (calendar: any): void => {
    this.selectedCalendar = calendar;
    this.onChangeLeftPane$.next({ calendar: calendar });
};

А что тогда является лучшим способом подписаться только на

onChangeLeftPane$.calendar

Answer 1

Вы можете использовать pluck, чтобы получить только calendar от вашего объекта, а затем, если необходимо, добавить filter (чтобы вы не излучали undefined если calendar отсутствует) и / или distinctUntilChanged (чтобы вы не выдавали одно и то же значение дважды, если оно не изменилось).

import { pluck, filter, distinctUntilChanged } from 'rxjs/operators';

onChangeLeftPane$.pipe(
  pluck('calendar'), // extract the property 'calendar' from the object
  filter(Boolean), // don't emit if the property 'calendar' was missing from the object
  distinctUntilChanged(), // only emit if this calendar is distinct from the previous one  
)

https://stackblitz.com/edit/typescript-eoyqi9

Answer 2

Настройка отдельного наблюдаемого для прослушивания изменений с помощью filter оператора

    this.onChangeCalendar=this.onChangeLeftPane$.asObservable()
.pipe(filter(obj=>Objects.keys(obj).includes('calendar'))
this.onChangeLeftPane$.next({ calendar: calendar });