Почему Angular CDK при возвращении назад через браузер убирает query параметры?

Question

[ali-tnkh]

Есть поиск, который открывается в модальном окне, модельные окна создаются через cdk overlay. Кнопка открытия модального окна поиска находится в хэдере, поиск может быть открыт на любой странице. Также поиск открывается, если в ссылке есть параметры (например ite.com/mypage?search=my_request). Т.е в окне поиска есть инпут, где я ввожу запрос (например "мой запрос"), нажимаю "Найти", ссылка меняется на "site.com/mypage?search=мой_запрос", т.к есть параметр search, то модальное окно открыто, и по параметру происходит поиск. Результаты отображаются в этом же модальном окне. Если я кликаю на результат, чтоб перейти на его страницу, то сначала идет переход на текущую страницу без параметров поиска (site.com/mypage), а потом на ту, которую я выбираю в результатах поиска. Это создает проблемы, когда я хочу вернуться назад.к поиску, потому что приходится дважды кликать "назад" в браузере. Если в ссылке есть другие параметры, не связанные с модальным окном, то они возвращаются при переходе назад, все нормально.
Когда я руками в браузере меняю ссылку с "site.com/mypage?search=мой_запрос" на любую другую, перехожу по ней, а потом возвращаюсь назад, то все нормально, я попадаю на страницу "site.com/mypage?search=мой_запрос".
Я пыталась использовать this.router.navigate вместо routerLink для перехода по ссылке из результатов поиска, но это все равно одинаково работает.
Я новичок в ангуляре, поэтому мне поможет любая информация, которая объясняет такое поведение, ну и хотелось бы узнать, что делать в таком случае.

Код открывающий модальные окна, если он может быть полезен:

public open(code: ModalCode, component, data?: any): void {
        const currentModals = this.event.getValue();
        const existModalIndex = currentModals.findIndex(x => x.code === code);
    
        const overlayRef = this.overlay.create({ height: '100%', width: '100%' });
        const portal = new ComponentPortal(component);
        const popupElementRef = overlayRef.attach(portal);
    
        const newModal: ModalItem = {code, overlayRef, data};
    
        const componentInstance: any & { modalItem: ModalItem } = popupElementRef.instance;
        componentInstance.modalItem = newModal;
    
        if (existModalIndex >= 0) {
          this.close(code, true);
    
          currentModals[existModalIndex] = newModal;
          this.event.next(currentModals);
    
        } else {
          this.event.next([...this.event.getValue(), newModal]);
        }
      }

cdk версия 8.2.3, angular версия 10.2

Answer 1

[eRKa]

Вы лучше показали бы код роутинга и как вызывается метод open, точнее, как обрабатываются параметры url.

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

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

Comments

[ali-tnkh]

Код открытия попапа через параметры:

const queryParamToModalMap: Record<ModalCode, ComponentType<unknown>> = {
      'atlas-item': PopupAtlasItemComponent,
      'medialib-item': PopupMedialibItemComponent,
      'news-item': PopupNewsItemComponent,
      'search': PopupSearchItemComponent,
    };

    this.activatedRoute.queryParams
      .pipe(untilDestroyed(this))
      .subscribe(params => {
        let noOneKnownModalsInParams = true;

        Object.keys(params).forEach(paramName => {
          const modalCmp = queryParamToModalMap[paramName];
          if (!modalCmp) {
            return;
          }

          noOneKnownModalsInParams = false;
          this.modalsService.open(paramName, modalCmp, {code: params[paramName]});
        });

        if (noOneKnownModalsInParams) {
          Object
            .keys(queryParamToModalMap)
            .forEach(modalCode => this.modalsService.close(modalCode));
        }
      });

Ссылка в модальном окне просто

<a class="article d-block" [routerLink]='item?.url'>

В настройках роутера ничего особого нет (например страница, на которой открывается модалка с параметрами atlas-item, поведение при переходе по ссылке в этом модельном окне такое же):

{
    path: 'services/atlas/:sectCode',
    loadChildren: () => import('./pages/atlas/page-atlas/page-atlas.module').then(m => m.PageAtlasModule)
  },
  {
    path: 'services/atlas',
    loadChildren: () => import('./pages/atlas/page-atlas/page-atlas.module').then(m => m.PageAtlasModule)
  },

Ну и внутри модулей страниц:

RouterModule.forChild([{path: '', component: PageAtlasComponent}])

Окно поиска может открываться на любой странице, потому что кнопка открытия окна находится в хэдере, т.е. к любой странице можно добавить параметр search, откроется модальное окно поиска.

[eRKa]

К сожалению, мне это мало дало инфы и у меня нет под рукой ангуляровского проекта, чтобы проверить, в отпуске я) Могу попробовать дать направление, можно порассуждать, что если в историю этот url попадает, значит где-то есть navigate, возможно внутри [routerLink]='item?.url' что-то отрабатывает.

Что я точно могу сказать что ссылка, например, services/atlas/:sectCode, это не тоже самое, что services/atlas?sectCode=123. При переходе по последней роутинг пойдет по дефолту, возможно services/atlas, а там уже будет читать параметры, значит services/atlas попадет в историю. Попробуйте этот параметр поиска перенести как сегмент в url site.com/mypage/:search, сам параметр надо будет кодировать. Думаю это сработает верно. Но надо проверить, может есть какие-то доп настройки роутинга, чтобы этого лишнего перехода не было.

[ali-tnkh]

eRKa, нашла закрытие попапов на this.router.events, а именно на instanceof NavigationStart. Я NavigationStart и подобное вообще не использую, поэтому сначала даже не обратила внимание, не знала, что искать. Спасибо.