Angular 2 обновляет представления при изменении значения локального хранилища

#javascript #angular #store

#javascript #angular #Магазин

Вопрос:

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

Модальный интерфейс и панель навигации — это два разных компонента.

Как я могу этого добиться?

Решение 1: Я думал вручную изменить переменные, пока публикация новых данных (имя и фамилия) была успешно выполнена. Могу ли я изменить переменные другого компонента (навигационной панели) из модального?

Решение 2: вызовите местоположение.перезагрузите, чтобы принудительно автоматически обновить все представления новыми данными в локальном хранилище.

Решение 3: использование хранилища

Спасибо

1. Похоже, вы уже ответили на свой вопрос тремя возможными решениями? В чем проблема?

2. Я пытаюсь иметь как можно больше решений, чтобы выбрать то, которое лучше для меня. Я не удовлетворен своим

Ответ №1:

Создайте службу-оболочку для получения / настройки локального хранилища, которая также будет генерироваться при настройке. Модальные вызовы, скажем, this.storageService.setItem('foo', 'bar') , в то время как панель навигации подписана this.storageService.changes$ .

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

1. Не могли бы вы, пожалуйста, привести небольшой пример для этого решения, похоже, того, которое я ищу. Я новичок в angular 2. Спасибо

2. Это в значительной степени так. Вы создаете сервис (для общей сути, официальное руководство по Angular вполне адекватно), который имеет два метода: getItem и setItem и свойство change$: Subject<{key, value}> . getItem вызывает только localStorage.GetItem, setItem вызывает localStorage.setItem и передает изменение в change$ поток. Вы внедряете свой сервис в панель навигации и модальный (и везде в приложении, где вы используете локальное хранилище). Navbar подписывается change$ и при необходимости обновляет свое отображение.