使用 CustomRouterStateSerializer 将路由数据序列化为状态答案

【问题标题】：Serialize Route Data into state using the CustomRouterStateSerializer使用 CustomRouterStateSerializer 将路由数据序列化为状态
【发布时间】：2020-06-11 15:43:43
【问题描述】：

我已在我的项目中配置并运行了 CustomRouterStateSerializer，我可以在 DevTools 中使用适用于 Chrome 的 Redux 扩展来查看结果。我可以看到写入状态的默认对象。

router: {
    state: {
      url: '/map/search',
      params: {},
      queryParams: {}
    },
    navigationId: 1
  }

我已经使用 data 属性向路线添加了额外的信息。

{ 
    path: 'map', 
    component: MapComponent,
    data: {
      label: "Map"
    },
    children: [
      {
        path: '',
        redirectTo: 'search',
        pathMatch: 'full'
      },
      { 
        path: 'search',
        component: SearchComponent,
        data: {
          label: 'Search',
          icon: 'search'
        }
      }…

是否可以更改 CustomRouterStateSerializer 以包含路由中的数据对象或仅包含 data.label 字符串？类似于以下内容....

router: {
    state: {
      label: "Search"
      url: '/map/search',
      params: {},
      queryParams: {}
    },
    navigationId: 1
  }

...或...

router: {
    state: {
      data: {
        label: "Search",
        icon: "search"
      }
      url: '/map/search',
      params: {},
      queryParams: {}
    },
    navigationId: 1
  }

谢谢

【问题讨论】：

标签： ngrx

【解决方案1】：

好吧，我被 CustomRouterStateSerializer 中使用的 Destructuring assignment 语法卡住了。

这是我的解决方案。

import { Params, RouterStateSnapshot } from '@angular/router';
import { RouterStateSerializer } from '@ngrx/router-store';

export interface RouterStateUrl {
  url: string;
  params: Params;
  queryParams: Params;
  data: any
}

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

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

    const { url, root: { queryParams } } = routerState;
    const { params, data } = route;

    return { url, params, queryParams, data };
  }
}

也许这会在未来对其他人有所帮助。

【讨论】：