angular - 处理ngrx路由器默认操作时如何访问自定义序列化程序

Question

我正在使用自定义序列化程序@ngrx/router-store

export interface CustomSerializer {
  url: string;
  params: Params;
  queryParams: Params;
  data: Data;
  showFilter: boolean;
}

我已经完成了基本设置，并且商店正在按预期使用序列化程序类型跟踪我的路线。

我希望能够在从内置操作触发的效果中访​​问自定义类型，就像这样

test$ = createEffect(() =>
  this.actions$.pipe(
    ofType(routerNavigatedAction),
    tap(({ payload }) => {
      console.log('filter?:' + payload.routerState.showFilter); <-- not allowed by typescript
    })
  ), { dispatch: false }
);

但payload由routerNavigatedActionis 类型提供RouterNavigatedPayload<SerializedRouterStateSnapshot>。 SerializedRouterStateSnapshot只知道root并且url什么都不知道showFilter，即使它在运行时就在那里

（在 tap() 之前调试断点）：

有没有办法让我绑定到核心路由事件并配置基础架构以返回我的自定义序列化程序类型？如果没有，是否有一种“好”的方法可以在我的效果中获得该 showFilter 属性？我知道我可以使用选择器从存储中获取强类型的数据，但我更喜欢使用效果已经提供的有效负载。

Answer 1

我想这就是你要找的

test$ = createEffect(() =>
  this.actions$.pipe(
    ofType<RouterNavigatedAction<CustomSerializer>>(routerNavigatedAction),
    tap(({ payload }) => {
      console.log('filter?:' + payload.routerState.showFilter);
    })
  ), { dispatch: false }
);