Угловая навигация назад без перезагрузки страницы

Question

У меня есть страница, на которой пользователь может применить некоторые фильтры (через форму), затем пользователь может выбрать один из фильтруемых элементов и перейти на страницу сведений.

Если пользователь снова щелкнет настраница сведений была перенаправлена ​​на страницу фильтра.Страница фильтра перезагружается без сохранения данных фильтров.

Я использую функцию history.back () для обратного действия.

Мне было интересно, есть ли способ вернуться обратно на страницубез перезагрузки, показывая точную страницу, которая была показана до того, как пользователь щелкнул ссылку подробности.

Answer 1

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

Однако я бы предпочел сохранить данные в общем сервисе и использовать стратегию маршрутизации.

Answer 2

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

• Использование localstorage API для сериализации и последующего извлечения состояния фильтра
• Использование инфраструктуры управления состояниями, такой как ngrx или ngxs
• Использование службы для сохранения состояния фильтра
• Передача состояния через activRoute

Я бы предложил использовать API localStorage для последовательного сохранения состояния в браузере и получения его обратно при инициализации страницы-помощника, или сохранения состояния фильтра в службе и запросаоттуда.

Вот очень простой пример для localStorage.(Не уверен, что код совершенно корректен, но вы должны понять ...)

export class FilterPage implements OnInit, OnDestroy {

  private filterItems: string[];

  constructor() { }

  ngOnInit() {
    if (localStorage.getItem('filterItems'))
      this.filterItems = JSON.parse(localStorage.getItem('filterItems'));
    } else {
      this.filterItems = [];
    }
  }
  
  ngOnDestroy() {
    if(this.filterItems.length > 0) {
      localStorage.setItem('filterItems', JSON.stringify(this.filterItems));
    }
  }
  
  addFilterItem(item: string) {
    if (!this.filterItems.includes(item)) {
      this.filterItems = [...this.filterItems, item];
    }
  }
  
  removeFilterItem(item: string) {
    if (this.filterItems.includes(item)) {
      this.filterItems = this.fiterItems.filter(currentItem => currentItem !== item);
    }
  }
}