2

我有一些参数需要放在我的一些页面中，这意味着当访问这些页面时，我想检查它们是否在 ngrx 商店中，如果有就使用它们。另一条规则是，如果它们存在于 URL 中，请使用它们并替换 ngrx 商店中的那些。

所以顺序是这样的：

  1. 如果有的话，使用来自 URL 的那些
  2. 如果有的话，使用来自ngrx商店的那些
  3. 如果没有，将它们标记为空

我发现只需键入脚本就很容易实现，但我不知道我应该通过<a>element 和 routerLink 作为参数传递什么。

有没有办法说什么时候RouterActions.Go被调用，检查ngrx store中是否已经有一些参数？

4

1 回答 1

2

当然有一个简单的方法。只需制作一个效果代理来处理路由操作并像使用任何其他 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));
}

这样，您也可以轻松地在路线中来回走动。

于 2018-04-30T16:13:17.313 回答