angular – 如何使用ngrx-router-store在ngrx效果中获取路径参数

发布时间：2020-12-17 17:47:18 所属栏目：安全来源：网络整理

导读：我有效果类,我想根据路由器参数ID加载详细信息 @Effect() getDetails$= this.actions$.ofType(DetailActions.GET_DETAILS).pipe( map(toPayload),switchMap(payload = { return this.detailService .getDetail(payload)//I want router params here in paylo

我有效果类,我想根据路由器参数ID加载详细信息

@Effect()
  getDetails$= this.actions$.ofType(DetailActions.GET_DETAILS).pipe(
    map(toPayload),switchMap(payload => {
      return this.detailService
        .getDetail(payload)//I want router params here in payload
        .pipe(
          map(detail=> new DetailActions.GetDetailSuccess(detail)),catchError(error =>
            Observable.of(new DetailActions.GetDetailFail(error))
          )
        );
    })
  );

我想在有效负载中获取路由器参数,这样我就不必从组件传递有效负载,而是直接从特技类中获取它.

解决方法

如果您已经有一个选择器映射到您的应用程序路由器状态：

export const getRouterState = createFeatureSelector<
  fromRouter.RouterReducerState<RouterStateUrl>
>('router');

然后你可以使用来自rxjs /运算符的withLatestFrom从路由器状态获取你的参数并可能将它们与你的动作的有效负载合并,如下所示：

@Effect()
getDetails$= this.actions$.pipe(
    ofType(DetailActions.GET_DETAILS),withLatestFrom(
        this.store.select(fromRoot.getRouterState),(action,router) => {
            // do your logic here
            // and return a newPayload:
            return {
                id: router.state.params.id,payload: action.payload
            }
        }
    ),switchMap(newPayload => {
        return this.detailService
        .getDetail(newPayload)
        .pipe(
            map(detail=> new DetailActions.GetDetailSuccess(detail)),catchError(error => Observable.of(new DetailActions.GetDetailFail(error)))
        );
    })
);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!