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

Question

[210mev]

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

Есть Angular SPA c Ангулар Материал. Все приложение это один компонент, что типа табов, по которым юзер переходит заполняя информацию. Как сделать так что бы при нажати браузерной кнопки "назад" юзер возвращался на предыдущий таб, при нажатии браузерной кнопки "вперед" переходил на уже заполненый таб? Нашёл такой вариант, но там на основе роутинга и других компонентов, но у меня один компонент. Подскажите куда копать примерно? В коментах по ссылке, автор пишет про добавление РоутерЛинк к табам, но не совсем понимаю как это сделать, если надо все равно в роутинге указывать путь и компоненты.

Answer 1

[Антон Швец]

Чтобы заработала браузерная "Назад" браузеру нужно знать что был переход по маршруту.
Т.е. нажатие на таб должно изменять адрес в командной строке и изменилось window.history
В спа фреймворках удобной абстракцией для этого служит роутер.
В ангуляре это будет выглядеть примерно так https://ng-run.com/edit/zmORlCu2qJ5hI5G7Ggbk

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

upd:
Можно сделать все в одном компоненте при желании.
Сделать роут вида
{ path: 'tabs/:tab', component: TabsComponent },
А в самом табс следить route.params.subscribe(({ tab}) => { ... })

Comments

[210mev]

Добавил ваш код, что бы в URL записывать индекс таба.

onTabClick(tabName) {
  this.router.navigate(['.'], {
    relativeTo: this.route,
    queryParams: { tabName },
  })
}

Индекс таба можно получить методом из Ангулар Материал API компонента. И в самом компоненте проверять URL на индекс таба с помощью кода по моей ссылке и рендерить\устанавливать по индексу нужный таб. И да, получилось без разбития на компоненты.

[Антон Швец]

210mev, лучше разбивать на компоненты по возможности. Позволяет дольше сохранять контроль над кодом.

[Антон Швец]

210mev, да и по вашей ссылке не очень правильный код. router.events стоит использовать там, где ActivatedRoute недоступен.
А в компоненте нужно слушать

this.route.queryParams.subscribe(queryParams => { ... })

[210mev]

Антон Швец, Спасибо, попробую. А как это ActivatedRoute может быть не доступен?

[Антон Швец]

210mev, в сервисе например, в рутовом или модульном контексте. Ну не то недоступен, но не тот что нужно.
Он выдается для конкретного текущего уровня роутинга и события у него свои. Можно конечно пройтись по цепочке firstChild, но зачем.
По ссылке там в app-root все происходит, на этом уровне route будет один раз меняться,при старте.
А Router у всех одинаковый.

Answer 2

[abberati]

Браузерные кнопки "вперёд" и "назад" работают с историей браузера, вам не обойтись без роутера и разных компонентов.

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

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

Comments

[210mev]

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

[Антон Швец]

Никак.
Вообще никак. Честно.

onTabClick(tabName) {
  this.router.navigate(['.'], {
    relativeTo: this.route,
    queryParams: { tabName },
  })
}