处理 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 }
);

但是routerNavigatedAction提供的payload是RouterNavigatedPayload<SerializedRouterStateSnapshot>类型。 SerializedRouterStateSnapshot 只知道 root 和 url 而对 showFilter 一无所知，即使它在运行时存在

(tap()前调试断点):

有没有办法让我绑定到核心路由事件并将基础结构配置为 return 我的自定义序列化程序类型？如果没有，是否有一种 'good' 方法来获得我的效果中的 showFilter 属性？我知道我可以使用选择器从商店中获取强类型数据，但我更愿意使用效果已经提供的有效负载。

Answer 1

我想这就是你要找的东西

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

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

How to access a custom serializer when handling ngrx router default actions

angular-routing

ngrx

angular

ngrx-router-store