Question

我需要将一些参数放到我的某些页面上，这意味着当访问这些页面时，我想检查它们是否在ngrx存储中，如果它们存在则使用它们。另一个规则是，如果它们存在于URL中，请使用它们并替换ngrx store中的那些。

所以顺序就像：

如果有任何
如果有任何
将它们标记为空
我发现只使用类型脚本很容易实现，但我不知道应该通过<a>元素和routerLink作为参数传递什么。

有没有办法说出调用RouterActions.Go时，检查ngrx商店中是否已有某些参数？

Answer 1

当然有一种简单的方法。只需创建一个效果代理来处理路由操作，并像使用任何其他NGRX效果一样使用路由器：

@Injectable()
export class RouterEffects {
  @Effect({ dispatch: false })
  navigate$ = this.actions$.ofType(RouterActions.GO)
    .map((action: RouterActions.Go) => action.payload)
    .do((routerPayload: RouterPayload) => {
      this.router.navigate(routerPayload.path, routerPayload.query);
  });

  @Effect({ dispatch: false })
  navigateBack$ = this.actions$.ofType(RouterActions.BACK)
    .do(() => this.location.back());

  @Effect({ dispatch: false })
  navigateForward$ = this.actions$.ofType(RouterActions.FORWARD)
    .do(() => this.location.forward());

  constructor(
    private actions$: Actions,
    private router: Router,
    private location: Location
  ) {}
}

使用router.actions.ts：

export const GO = '[Router] Go';
export const BACK = '[Router] Back';
export const FORWARD = '[Router] Forward';

export interface RouterPayload {
  path: string[];
  query?: NavigationExtras;
}

export class Go implements Action {
  readonly type = GO;
  constructor(public payload: RouterPayload) {}
}

export class Back implements Action {
  readonly type = BACK;
}

export class Forward implements Action {
  readonly type = FORWARD;
}

export type Actions
  = Go
  | Back
  | Forward;

并在您的组件中，您在导航上调度路由器操作，而不是直接在模板中调用routerLink：

navigate(routerPayload: RouterPayload) {
  this.store.dispatch(new RouterActions.Go(routerPayload));
}

通过这种方式，您还可以轻松地在路线中来回走动。

如何使用ngrx / router-store维护参数

1 个答案: