Angular2, как сохранить переменные сервиса при смене роута?

Question

[Volodya-NRG]

Здравствуйте. Пытаюсь наладить на Angular2 работу админ-панели.
1. Роут: comments . Тут подгружается список с сервера всех комментариев и сохраняется в свойстве сервиса (httpService). Решил этот класс использовать как контейнер где будут хранится данные, каторые приходят с сервера. Этот сервис передаю потом в необходимые компонеты.
2. Роут: comments/:id/edit . Это страница для редактирования того или иного комментария.

В начале, в роуте /comments, я подгружаю список, при переходе на comments/:id/edit хочу взять из ранее созданного списка необходимый объект, чтоб иметь возможность редактировать в форме. Но при переходе на редактирование списка уже нет, т.е. сервис не сохранил или сбросил свойство.

Что подскажете?
------------------------------
(спустя пару дней)
вот так вроде решается
https://youtu.be/nsA_50URfbk?list=PLC3y8-rFHvwg5gE...

Comments

[Volodya-NRG]

Попробывал сохранить в глобальной переменной window.comments, то в этом случае нормально видит данные, но TypeScript ругается на window. Конечно можно и так, но хотелось бы более правильно сделать.

[Александр Манаков]

Код в студию!

Answer 1

[sutkin main]

можно испльзовать localStorage.setItem('list', 'listings')

при смене роуте просто localStorage.getItem('list');

только когда обратно вернетесь в list router не забудьте рефрешнуть localStorage.removeItem('list')

А так вообше можно использовать service как глобальный объект Service(List) List.listings = 'Listings'

Надеюсь я вам смог помочь

Comments

[Volodya-NRG]

localStorage - с таким успехом могу и в глоб. переменную (window.myList) тоже поставить, ток немного TypeScript на это ругается, но ни чего страшного. Вроде как глобальный использую объект Сервис. Данный сервис подключаю и к компонету где показывается список, и к компонету, каторый показывает форму для редактирования, и в appComponent, и AppModule и все равно не сохранятет.

[Volodya-NRG]

можно ваш скайп, чтоб оперативней спрашивать.

Answer 2

[coderlex]

А ваш сервис точно был прикреплен именно к аппликации, а не какому-то отдельному компоненту вроде контроллера роута? Посмотрите, может, у какого-то компонента он прописан в providers.

Comments

[Volodya-NRG]

Куда я подключил этот сервис:
1. компонент списка комментариев
2. компонет редактирования одно комментария
3. компонет app
4. модуль app
осталось наверно только к роуту что ли подключить.

Вообще, в идеале как лучше поступать с подобным? Этот список, что с сервера, я б хотел использовать там где мне вздумается, т.е. не конкретно только в двух компонентах (listComments, formComment) ... например так же можно его и использовать у пользователей, мол сколько он оставил комментариев и т.д.

[coderlex]

Volodya-NRG: вот в этом и вся проблема. Перечисляя в providers вы создаете новую точку крепления экземпляра сервиса в этом объекте (модуле или компоненте). Т.е. у вас инстансировано одновременно несколько одинаковых сервисов в дереве модулей и компонентов. А DI Injector в каждом частном случае берет ближайшую ссылку из списка предков.

Если вам нужен один глобальный сервис, то перечислите в providers главного NgModule вашего приложения, тогда он будет доступен повсюду внутри приложения. Не перекрывайте его вложенными экземплярами.

[Volodya-NRG]

coderlex: Расположил его в appModule ... а как потом мне из компонентов к нему обращаться?
Ранее обращался через this.httpService

[Volodya-NRG]

coderlex: в компонет импортировал HttpService, после в конструкторе прописывал приватную переменную, внутри класса использовал через this.httpService ... При вашем подходе как можно обращаться к глоб. Сервису? Обычно в программировании с Ангуляр ... другие люди примерно так же делают?
Задача вроде из рядовых ... не хотелось бы извращаться. Как принято в подобных ситуациях (списки, редактирование одного элемента из списка). Сколько видел примеров , все показывают расположение на одной странице формы и списка. А если в форме 20-30 пукнтов, да и список сам из тысячи записей ... из-за этого приходится и разделять на роуты.

Answer 3

[Volodya-NRG]

или может все же будет логичным хранить данные в глобальной обычной переменной?
Неужели сервис в своем виде не может передаваться из компонента в компонент в новом своем варианте...
Данная проблема даже и не возникает в таких фреймворках как Backbone, Marionette, а тут (Angular2) как снег наголову.

Comments

[Volodya-NRG]

https://youtu.be/nsA_50URfbk?list=PLC3y8-rFHvwg5gE...