将查询参数与@ngrx/路由器存储合并

Question

我在我的 Angular 2+ 应用程序中使用 @ngrx/router-store，并尝试在 url 的查询参数中对一些对象进行编码。具体来说，每次我在查询参数中对对象进行编码时，我都希望将其与已经存在的查询参数合并。为此，我根据文档为路由器存储编写了以下副作用：

@Injectable()
export class RouterEffects {
@Effect({ dispatch: false })
navigate$ = this.actions$.pipe(
ofType(RouterActions.GO),
map((action: RouterActions.Go) => action.payload),
tap(({ path, query: queryParams, extras}) => {
this.router.navigate(path, { queryParams,  queryParamsHandling: "merge", ...extras }))
})
}

然后要添加新的查询参数，我可以将它们调度到路由器存储：

store.dispatch(new RouterActions.Go({[], objectToEncode}));

除非快速连续调度多个对象，例如，首次加载应用程序时，否则此方法工作正常。在这种情况下，副作用将在前一个导航完成之前开始下一个导航，这意味着每个后续导航的查询参数将覆盖上一个导航的查询参数，因此只有最后一个对象将被编码在最终 url 中。

有没有办法防止副作用处理下一个 GO 操作，直到上一个导航完成？我尝试使用存储中的查询参数压缩操作，但是当正在编码的对象已在 url 中时，此操作会失败，从而阻止存储发出。

Answer 1

正如@bygrace所指出的，扫描操作员可以解决问题。以下是修改为使用扫描运算符的原始代码：

@Injectable()
export class RouterEffects {
@Effect({ dispatch: false })
navigate$ = this.actions$.pipe(
ofType(RouterActions.GO),
map((action: RouterActions.Go) => action.payload),
scan((currentRoute, {path, query: queryParams, extras}) => {
const nextQueryParams = Object.assign({}, currentRoute.query, queryParams);
return {path, query: nextQueryParams, extras};
}, {path: [], query: {}, extras: {}}),
tap(({ path, query: queryParams, extras}) => {
this.router.navigate(path, { queryParams,  queryParamsHandling: "merge", ...extras }))
})
}