Question

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

我在ngrx文档中看到了这一点：

ROUTER_CANCEL和ROUTER_ERROR包含之前的商店状态导航。使用以前的状态恢复的一致性存储。

有人可以帮我解决如何从Router_cancel行动中获取以前的状态。

由于

Answer 1

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

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

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

PFB，soln：

@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;
}

Answer 2

我使用ngrx/effect存储最新的两个ROUTER_NAVIGATION操作，并在我获得ROUTER_CANCEL或ROUTER_ERROR时重新调度前一个操作，以便路由器状态完全恢复了。

@Injectable()
export class RouterEffects {
    private previousRouterNavigationAction: RouterNavigationAction<
        RouterStateUrl
    >;
    private currentRouterNavigationAction: RouterNavigationAction<
        RouterStateUrl
    >;

    @Effect({ dispatch: false })
    save$: Observable<Action> = this.actions$.pipe(
        ofType(ROUTER_NAVIGATION),
        switchMap((action: RouterNavigationAction<RouterStateUrl>) => {
            this.previousRouterNavigationAction = this.currentRouterNavigationAction;
            this.currentRouterNavigationAction = { ...action };
            return Observable.empty();
        })
    );

    @Effect()
    load$: Observable<Action> = this.actions$.pipe(
        ofType(ROUTER_CANCEL, ROUTER_ERROR),
        switchMap(action => Observable.of(this.previousRouterNavigationAction))
    );

    constructor(private actions$: Actions) {}
}

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

2 个答案: