Angular - Обрабатывать браузер обратно на одной странице приложения «поиск»? - PullRequest
Новая
       10

Angular - Обрабатывать браузер обратно на одной странице приложения «поиск»?

0 голосов
/ 22 апреля 2020

У нас есть приложение для поиска на одной странице без какого-либо маршрута. У нас просто есть такие параметры поиска: 

localhost:4200/?param1=x&param2=y

Вы можете представить этот сайт как любой поисковый сайт с несколькими фильтрами, такими как airbnb.com.

Поскольку мы хотим, чтобы пользователь мог добавлять в закладки все поисковые ссылки, мы всегда добавляем / меняем параметры запроса в URL всякий раз, когда пользователь добавляет / изменяет фильтр. Каждое изменение фильтра немедленно запускает «поиск». Таким образом, «запуск поиска» должен быть размещен в центральной позиции, а не в каждом отдельном компоненте. (каждый фильтр имеет свой собственный компонент).

Кроме того, поскольку у нас есть только один основной маршрут, браузер обратно просто установил url на предыдущий набор параметров, без повторной инициализации. Таким образом, чтобы снова запустить поиск, нам нужно прослушать изменения URL.

Итак, рабочий процесс базового интерфейса пользователя c выглядит следующим образом:

  • Каждый фильтр (каждый отдельный компонент) читает его значение из URL-адреса queryParams и инициализирует себя. Кроме того, каждое изменение фильтра обновляет URL-адрес следующим образом (без навигации, просто обновление URL-адреса при объединении параметров): 
    this.router.navigate([], {
       queryParams: {
         param1: "new value"
       },
       queryParamsHandling: 'merge'
    })
  • В центральном местоположении (например, app.component) мы подписываемся на Подобные queryParams и каждое изменение запускают поиск: 
    this.activatedRoute.queryParams.subscribe(params => this.searchService.search(params));

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

...