如何从ngrx中的Router_Cancel获取以前的状态？

Question

我试图通过使用CanDeactivate(如果表单是脏的而不保存)来限制用户导航离开当前页面.当我们点击任何链接时,Router_Navigation事件被调用并且它正在更新存储中的路由器状态,如果我取消模态弹出的页面导航(从可以停用),Router_Cancel正在调用事件,但当前路由器状态是没有得到更新(它仍然指向其他页面).

我在ngrx文档中看到了这个:

ROUTER_CANCEL和ROUTER_ERROR包含导航前的存储状态.使用先前的状态来恢复商店的一致性.

有人可以帮助我如何从Router_cancel行动中获得以前的状态.

谢谢

Answer 1

我通过创建一个 applicationRouter 状态来维护当前和以前的路由来解决这个问题，每当 ngrx 路由器调度 ROUTER_NAVIGATION 事件时，我都会监听它并更新我的 applicationRouterState。

在每个点，applicationRouter 将只有两个路由器事件（当前状态和先前状态）。

每当 Router_Cancel 被触发时，我就会切换先前的路由器和当前的路由器状态。

PFB，解决方案：

@Effect()
    navigationListener$ = this.actions$.ofType('ROUTER_NAVIGATION')
        .pipe(
            switchMap((routerNavigationAction: RouterNavigationAction<RouterDefinition>) => {
                return of(routerNavigationAction).pipe(
                    withLatestFrom(this._routerNavigationData$),
                    map(([action, routerNavData]: [RouterNavigationAction<RouterDefinition>, RouterState]) => {
                        // TODO: Move this logic to Reducer
                        if (!(routerNavData.currentRouter && routerNavData.currentRouter.url
                            && routerNavData.previousRouter && routerNavData.previousRouter.url)) {
                            routerNavData.previousRouter = routerNavData.currentRouter =  action.payload.routerState;
                        } else {
                            routerNavData.previousRouter = routerNavData.currentRouter;
                            routerNavData.currentRouter = action.payload.routerState;
                        }
                        return new fromActions.MaintainPrevCurrRouterStateAction(routerNavData);
                    })
                );
            })
        );

这是我的状态对象：

export interface RouterDefinition {
    url: string;
    queryParams: Params;
    params: Params;
    segments: string[];
}
export interface RouterState {
    currentRouter: RouterDefinition;
    previousRouter: RouterDefinition;
}