Держите примененные фильтры на браузере назад и вперед угловой 2

У меня есть страница списка продуктов, где у меня есть все данные, чтобы показать пользователю, если пользователь применяет фильтры, я фильтрую список на стороне клиента, используя Angular 2,

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

Решения, которые я думаю: -

Подход : всякий раз, когда пользователь применяет фильтр, мы добавляем его в URL и перенаправление.

Проблема : на каждом URL будет вызываться API перенаправления.

Есть ли лучший способ, которым я могу подойти к этой проблеме ?

3 4
javascript node.js single-page-application

3 ответа:

Если вы хотите, чтобы критерии фильтра были видны в URL-адресе (и чтобы они были помечены), используйте параметры маршрутизатора и перенаправляйте на URL-адрес, содержащий обновленные параметры. При использовании routerCanReuse() { return true; }, then the component is not even reloaded but justвызывается routerOnReuse ()', где можно получить обновленные параметры.

Если вы не хотите, чтобы критерии фильтра отображались в URL-адресе, используйте общий сервис для хранения параметров, тогда навигация не уничтожает значения параметров. Убедитесь, что поставщик услуг обеспечивает достаточно высокий уровень (AppComponent например) для того, чтобы он не был уничтожен, когда компонент будет уничтожен путем маршрутизации.

1

Хранение объектов в URL-адресе в качестве аргументов-это хороший подход, так как вы не зависите от скрытых состояний (глобальных переменных приложения) для построения представления.

Однако я бы не перехватывал компонент маршрутизации, а скорее использовал поддержку Angular для структурированных URL-адресов и фильтровал данные в методе onInit или всякий раз, когда он доступен.

2

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

Причина для использования обоих, Вы можете войти на страницу сведений о продукте тремя способами:

  1. Из Списка Продуктов.
  2. непосредственно из URL.
  3. из какого-то другого, где вы могли бы дать ссылка.

И поэтому вы не можете просто использовать this._location.back();, так как вы не захотите перенаправлять на последнюю страницу во всех случаях. Поэтому мой подход состоял в том, чтобы сохранить последний URL-адрес в сервисе и в компоненте detail проверить, есть ли какой-либо сохраненный URL.

Здесь важно проверить и вставить сохраненный URL-адрес в ngOnInit(), поскольку пользователь не всегда может нажать кнопку Сохранить.

Прикрепляя код к сервису, он довольно прост.

@Injectable()
export class ReturnHistoryService {

   private _returnURL: string;

   saveReturnURL(returnURL: string) {
     this._returnURL = returnURL;
   }

   popReturnURL() {
       let returnURL = this._returnURL;
       this._returnURL = null;
       return returnURL;
   }

`

Убедитесь, что поставщик не является per деталь.

0