Использование Angular Доступно для подписки на ключ хранения сеанса

Question

Попытка выполнить sh то, на что я надеялся, будет простым сценарием "посмотреть на ключ в хранилище сеансов и обновить его, когда он изменится", но Observables действительно сбивают меня с толку.

    message$ = new Observable(observer => {
    observer.next(window.sessionStorage.getItem('message'));
  });

  ngOnInit() {
    this.message$.subscribe();
  }

И сообщение $ привязано к HTML, довольно просто:

<p id="message">{{message$ | async}}</p>

Наблюдаемая будет выводить текст в HTML, если уже есть значение, сохраненное в 'message', но если нет сообщения на init, а затем он добавляется, или значение сообщения существует и обновляется, ничего не происходит. Я, очевидно, делаю что-то не так, и я был бы признателен за понимание кого-то знающего с Observables. // отредактировано для ясности

Answer 1

Я думаю, что вы ищете StorageEvent

Вы можете создать свою наблюдаемую из этого события, используя fromEvent , например:

const message$ = fromEvent<StorageEvent>(window, "storage").pipe(
  filter(event => event.storageArea === sessionStorage),
  filter(event => event.key === "message"),
  map(event => event.newValue)
);

Обратите внимание, что я добавил фильтры, чтобы специально искать обновления sessionStorage, и указал ключ === "message", но вы также можете использовать localStorage и любой ключ, который вы хотите

Также как Дамиан C указал , вам не нужно подписываться на это наблюдаемое, если вы планируете использовать его только в шаблоне.

РЕДАКТИРОВАНИЕ : решение выше работает только тогда, когда у вас открыто несколько вкладок и вы хотите синхронизировать изменения в хранилище. Отметьте этот ответ

Я думаю, вам нужно изменить место, где вы устанавливаете значение для sessionStorage. Я предлагаю использовать ваш собственный StorageService ( мой пример ), где вы установите свое значение для хранения и сохраните наблюдаемый, который должен генерироваться, когда вы устанавливаете ключ / значение.

Я сделал пример для стекаблиц

https://stackblitz.com/edit/angular-3szmzd

Answer 2

Поскольку вы используете канал asyn c, вам не нужно подписываться на ваш компонент, вы можете это убрать. AsyncPipe будет обрабатывать подписку / отписку за кулисами.

Попробуйте использовать тему вместо.

// This is what will help you broadcast your message and push updates to subscribers.
message$ = new Subject();

// Anytime the "message" changes, you'll want to call this.
updateTheSubject() {
    this.message$.next(window.sessionStorage.getItem('message'));
}

Ваш шаблон html может остаться без изменений.

https://rxjs-dev.firebaseapp.com/guide/subject

https://angular.io/api/common/AsyncPipe