Как сохранить параметры с помощью ngrx / router-store - PullRequest
Новая
       13

Как сохранить параметры с помощью ngrx / router-store

0 голосов
/ 30 апреля 2018

У меня есть некоторые параметры, которые мне нужно поместить на некоторые из моих страниц, что означает, что когда эти страницы посещаются, я хочу проверить, есть ли они в хранилище ngrx или нет, и использовать их, если они есть. Еще одно правило для этого заключается в том, что если они существуют в URL, используйте их и замените их в хранилище ngrx.

Итак, порядок такой:

  1. используйте те из URL, если есть
  2. используйте те из магазина ngrx, если есть
  3. пометить их как пустые, если их нет

Я обнаружил, что это легко реализовать с помощью только скрипта типа, но я не знаю, что я должен передавать в качестве параметров с <a> element и routerLink.

Можно ли сказать, что при вызове RouterActions.Go проверить, есть ли уже параметры в хранилище ngrx?

1 Ответ

0 голосов
/ 30 апреля 2018

Конечно, есть простой способ. Просто создайте прокси эффектов для обработки действий маршрутизации и используйте роутер, как и любые другие 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));
}

Таким образом, вы также можете легко перемещаться по маршрутам туда-сюда.

...