Как не уничтожать компонент Angular 2+?

Question

[Дмитрий Гавриленко]

Привет. Давайте представим коротенькую викторину, где надо ответить на допустим 5 вопросов. Допустим, что вопросы у нас достаточно большие и каждый занимает целый экран.
Можно сделать так: создать один компонент наверстать все вопросы на одной странице и с помощью state показывать тот или иной. Плюсы: один компонент, единая точка сбора данных ( и можно возвращаться на прошлый вопрос) и их последующая обработка. Минусы: очень большая верстка.

Хотелось бы разбить вёрстку. Для этого придется создать под каждый вопрос отдельный компонент и переключаться между ними с помощью роутинга q/1, q/2 ... q/5.

Можно опять же сделать единую точку сбора данных через @@Output в компонентах вопросов. Но теперь не получится вернуться назад и видеть, что было выбрано в предыдущем вопросе.

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

Как заставить компоненты вопросов жить?

Этот длинный пример не является какой-то таской, я просто хотел как можно ближе передать вам смысл моего вопроса. Решения есть, можно как минимум сделать сервис и хранить в нем данные, но смысл в другом.

Answer 1

[Demian Smith]

Вот полезная статья, которая многое проясняет https://medium.com/@dan_abramov/smart-and-dumb-com...

Идея в том чтоб каждый вопрос находился в своём компоненте и этот компонент был "тупым". Имеется ввиду что сам компонент на хранит ответ пользователя и не знает как его получить извне. Он получает предыдущий ответ пользователя через @@Input и отдаёт новый ответ пользователя через @@Output. Само состояние никогда не хранится в компоненте-вопроса.

Весь список вопросов менеджится внешним компонентом и внешний компонент решает какой вопрос показывать. Так же внешний компонент собирает и хранит ответы пользователей из @@Output компонентов-вопросов. И при переходе назад на предыдущий вопрос предаёт этот ответ в @@Input компонента-вопроса для того чтоб тот корректно отобразил предыдущий ответ пользователя.

Еще ангуляр не предоставляет никаких средств для менеджмента состояния и попытки запихнуть состояние системы в переменную сервиса (это первое к чему приходят почти все разработчики на ангуляре) обычно заканчивается непредсказуемым поведением системы по мере её разрастания и невозможностью переиспользовать компоненты. Вообще это полезное правило для любого ООП фреймворка, а не только для ангуляра: не допускайте появление состояний в сервисах, если хотите когда-то их переиспользовать. Хорошая новость: можно научиться писать так чтоб состояния в сервисах не появлялись никогда и не под каким предлогом. Это будет достойный код.

Если вернуться в к Ангуляру, с его полной неспособностью менеджить состояния из коробки, то советую взглянуть на https://github.com/ngrx/platform. Это редакс для ангуляра. На данный момент юзаю его на нескольких проектах, полёт нормальный. Не серебряная пуля, конечно, но многократно лучше чем то ничего, которое предлагает ангуляр из коробки. Если не знакомы с редаксом, то придется поуродствовать сначала. Но это окупается. Ну и не понимать редакс - как-то не комильфо для соврменного продвинутого программиста.