Angular 2 обновляет представление об изменении значения локального хранилища
У меня есть панель навигации, которая выводит имя и фамилию пользователя. Обе эти переменные берутся из локального хранилища при инициализации компонента. У меня есть модал, в модале я могу изменить имя и фамилию вошедшего пользователя и положить их снова в локальное хранилище. Если я их успешно изменю, я хочу обновить панель навигации новыми именем и фамилией.
Модальное окно и панель навигации — это два разных компонента.
Как я могу этого добиться?
Решение 1: Я думал вручную изменить переменные, пока публикация новых данных (имя и фамилия) была успешно выполнена. Могу ли я изменить переменные другого компонента (панели навигации) из модального окна?
Решение 2: вызовите location.reload, чтобы принудительно обновить все представление новыми данными в локальном хранилище.
Решение 3: использование магазина
Спасибо
Я стараюсь иметь как можно больше решений, чтобы выбрать то, которое лучше всего подходит для меня. меня не устраивает мой
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Создайте службу-оболочку для получения/настройки локального хранилища, которая также будет выдаваться при установке. Модальные вызовы, скажем, this.storageService.setItem('foo', 'bar'), в то время как панель навигации подписалась this.storageService.changes$.
Несмотря на то, что событие генерируется, когда что-то записывает в хранилище, оно генерируется только в других окнах для того же домена.
Не могли бы вы привести небольшой пример для этого решения, похоже, что я ищу. Я новичок в angular 2. Спасибо.
Это в значительной степени это. Вы создаете сервис (для общего понимания вполне достаточно официального руководства по Angular), который имеет два метода: getItem и setItem, а также свойство change$: Subject<{key, value}>. getItem вызывает только localStorage.getItem, setItem вызывает localStorage.setItem а также и передает изменение в поток change$. Вы вводите свой сервис в панель навигации и модальное окно (и везде в приложении, где вы используете локальное хранилище). Navbar подписывается change$ и при необходимости обновляет свое отображение.
Кажется, вы уже ответили на свой вопрос с 3 возможными решениями? В чем проблема?