@210mev
PHP

Как в Ангулар SPA работать с браузерными кнопками Вперед\Назад?

Доброе время суток!

Есть Angular SPA c Ангулар Материал. Все приложение это один компонент, что типа табов, по которым юзер переходит заполняя информацию. Как сделать так что бы при нажати браузерной кнопки "назад" юзер возвращался на предыдущий таб, при нажатии браузерной кнопки "вперед" переходил на уже заполненый таб? Нашёл такой вариант, но там на основе роутинга и других компонентов, но у меня один компонент. Подскажите куда копать примерно? В коментах по ссылке, автор пишет про добавление РоутерЛинк к табам, но не совсем понимаю как это сделать, если надо все равно в роутинге указывать путь и компоненты.
  • Вопрос задан
  • 269 просмотров
Решения вопроса 1
Xuxicheta
@Xuxicheta Куратор тега Angular
инженер
Чтобы заработала браузерная "Назад" браузеру нужно знать что был переход по маршруту.
Т.е. нажатие на таб должно изменять адрес в командной строке и изменилось window.history
В спа фреймворках удобной абстракцией для этого служит роутер.
В ангуляре это будет выглядеть примерно так https://ng-run.com/edit/zmORlCu2qJ5hI5G7Ggbk

Насчет заполненности, в данном примере при переходе компоненты табов дестроятся и данные пропадают.
Возможные решения - заставить роутер удерживать в памяти компоненты или хранить данные не в компоненте.
Второй вариант проще, можно например реактивную форму держать в сервисе, только не забыть уничтожить ее, когда станет не нужна. Или хранить просто данные с формы в компоненте. Если хранить в локалсторадже, то данные сохранятся даже если перезагрузить страничку.

upd:
Можно сделать все в одном компоненте при желании.
Сделать роут вида
{ path: 'tabs/:tab', component: TabsComponent },
А в самом табс следить route.params.subscribe(({ tab}) => { ... })
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@abberati
frontend-разработчик
Браузерные кнопки "вперёд" и "назад" работают с историей браузера, вам не обойтись без роутера и разных компонентов.

Либо пишите свой роутер (вот апишка браузера), либо используйте ангуляровый роутер. Всё равно придётся бить приложение на компоненты и рендерить разные компоненты на разных виртуальных страницах. Иначе кнопки не заведутся.
Никак.
Вообще никак. Честно.

PS: На самом деле, ваш божественный компонент может постоянно следить за текущим URL и рендерить ту или иную вкладку. А на кнопки переключения вкладок нужно повесить роутерлинки, чтобы URL менялся по клику. Но без роутера никак.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы