Как в ангуляре при изменении данных в localstorage рендерить измененную информацию?

Question

[egorggegor]

Всем привет. Пишу SPA приложение, как можно организовать обновление страницы при изменении информации в localStorage.
В html есть форма и кнопка, при нажатии на кнопку отправляется строка из формы в функцию компонента, как можно подписаться на эту функцию, чтобы при ее изменении рендерилась только та часть страницы, которая является новой.
Как это можно сделать?

Спасибо за ответы !

Comments

[Kovalsky]

Общее универсальное решение вам подсказали ниже, но все же лучше опишите задачу конкретней, приложите код,

[egorggegor]

Kovalsky,
Есть кнопка:

При ее нажатии вызывается функция из следующего класса:

В функции генерируется событие, которое передается дальше по верстке:

Событие в виде строки приходит в функцию компонента:

Где вызывается функция сервиса (можно сказать контроллера), которая работает с LocalStorage:


Вопрос заключается в том, что нужно сделать, чтобы при нажатии на кнопку, страничка рендерила только ту часть, которая является новой. На данный момент данные просто кладутся в хранилище и появляются, когда страницу обновляют. (пробовал в коде дописать функцию которая сама обновляет страницу, но так не должно быть, это же SPA приложение)

[Kovalsky]

egorggegor, ну так а в чем проблем класть новый комментарий в существующий массив комментариев?

[egorggegor]

Kovalsky, в этом нет проблемы, как организовать ререндеринг той части страницы, которая является новой (то есть мы написали комментарий, и нужно отобразить его, не перезагружая всей страницы). Это нужно делать с помощью подписки на событие?

[Kovalsky]

egorggegor, ну в смысле как) У вас же angular, у вас данные обновляются в обе стороны: меняете данные в модели - меняется их отображение во view, меняете во view нужные вам данные - они меняются в модели. Это одна из основных функций ng и других фреймворков. Если у вас есть массив comments который вы отображете в шаблоне, то чтобы перерендерить часть страницы с комментариями достаточно обновить массив comments - что-то из него удалить или добавить. То есть вам сейчас достаточно newComment положить в массив комментариев которые рендерятся на странице, и он сразу же отобразится. Если у вас работает как-то по-другому, то стоит это указать в тексте вопроса и приложить код шаблона и соответствующего компонента,

У вас есть массив с комментариями?

[egorggegor]

Kovalsky, Спасибо за развернутый комментарий, сейчас попробую переделать. Массив с комментами добавлю

[egorggegor]

Kovalsky, Спасибо, все заработало, напишите в ответы, я вас отмечу!

Answer 1

[Kovalsky]

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

Answer 2

[Daniil Vasilyev]

Я бы написал сервис-фасад, через который будет идти запись в localstorage, так же с помощью RxJs сделал подписку на событие записи в localstorage, передавая ключ, а уже в подписчике в контроллере проверять нужные ключи и если надо, то выставлять новые значения полям.