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

Для того чтобы в Angular SPA работать с браузерными кнопками ВпередНазад, можно воспользоваться API History встроенной в браузер.

Итак, вот шаги, которые нужно выполнить, чтобы реализовать данную функциональность:

  1. Импортируйте сервис Location из '@angular/common' в компоненте, где вы хотите использовать кнопки ВпередНазад.
   import { Location } from '@angular/common';
  1. Создайте экземпляр Location в конструкторе компонента.
   constructor(private location: Location) { }
  1. Добавьте методы goBack() и goForward() в ваш компонент, которые будут вызывать соответствующие функции API history.back() и history.forward().
   goBack() {
     this.location.back();
   }

   goForward() {
     this.location.forward();
   }
  1. Теперь вы можете связать эти методы с браузерными кнопками ВпередНазад в вашем шаблоне компонента.
   <button (click)="goBack()">Назад</button>
   <button (click)="goForward()">Вперед</button>

Это все! Теперь при нажатии на кнопку "Назад" вы будете перемещаться по предыдущим страницам в вашем истории просмотра, а при нажатии на кнопку "Вперед" вы будете перемещаться по следующим страницам в истории просмотра.

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