NgRx - Многоуровневые параметры маршрута не могут получить доступ из CustomSerializer Router Store - PullRequest
Новая
       26

NgRx - Многоуровневые параметры маршрута не могут получить доступ из CustomSerializer Router Store

0 голосов
/ 07 сентября 2018

У меня есть путь, объявленный как: 

{
  path: 'app/:userId',
  children: [...AppChildrenRoutes]
}

А потом, внутри AppChildrenRoutes 

{ path: 'feature', component: MainFeatureComponent }

Итак, в какой-то момент моего приложения я могу получить localhost:4200/app/123/feature. Внутри этого компонента с помощью некоторых действий я могу перейти к другому маршруту, например так: 

this.router.navigate([
  'app',
  this.userId,
  'feature',
  { search: this.searchFor }
]);


Рассматривайте это как крупное корпоративное приложение, которое меняет архитектуру, чтобы использовать NgRx, шаг за шагом.
Итак, я столкнулся с проблемой в Router Store. Я все настроил и все работает.
После Маршрутизатора Store Документы Я написал Custom Serializer, и он выглядит так 

serialize(routerState: RouterStateSnapshot): RouterStateUrl {
  const { url } = routerState;
  const queryParams = routerState.root.queryParams;

  while (route.firstChild) {
    route = route.firstChild;
  }
  const params = route.params;

  return { url, queryParams, params };
}

И я узнал, что, учитывая URI, такой как 

localhost:4200/app/123/feature;search=blue

route.params возвращает только параметр search, а не userId и search.

Я могу реализовать CustomSerializer, который возвращает все params с пути? (в этом случае оба userId и search).

Я пытался, но безуспешно, на каждой итерации цикла while проверять наличие параметров и добавлять их к объекту до последнего. Хорошо, хорошо или плохо? Как я мог работать это и не подвести?
Спасибо.

1 Ответ

0 голосов
/ 10 сентября 2018

У меня была похожая проблема, и я решил ее, расширяя объект params при каждом прохождении цикла.

Мой CustomSerializer теперь выглядит так: 

export class CustomSerializer implements RouterStateSerializer<RouterStateUrl> {
serialize(routerState: RouterStateSnapshot): RouterStateUrl {
    let route = routerState.root;

    let params = {};
    while (route.firstChild) {
        params = {
            ...params,
            ...route.params
        };
        route = route.firstChild;
    }

    const {
        url,
        root: { queryParams }
    } = routerState;

    return { url, params, queryParams };
}

}

...