使用 ngrx 存储时如何在 Angular 2 中导航

Question

我将 ngrx store (4.x) 与 Angular 4 一起使用。我使用效果在后端进行 CRUD 操作，就像下面的示例在后端 API 上添加了一个任务。

效果：

  @Effect()
  addTask: Observable<Action> = this.actions$
    .ofType(LeadAction.ADD_TASK)
    .map((action: LeadAction.AddTaskAction) => action.payload)
    .switchMap((task: TaskViewModel) => {
      return this.leadApi.leadAddTask(task.LeadId, task)
        .map((taskResult: TaskViewModel) => {
          return new LeadAction.AddTaskSuccessAction(taskResult);
        })
        .catch((e: any) => of(new LeadAction.AddTaskFailureAction(e)));
    });

任务编辑组件：

  onSave(): void {
    this.store.dispatch(new AddTaskAction(this.task));

    // **** NAVIGATE TO PAGE TaskListComponent or OverviewComponent ON SUCCESS
    // OR
    // **** NAVGIATE TO PAGE Y ON ERROR
  }

问题：在我的组件中，我需要导航到不同的页面，现在我很难把这个逻辑放在哪里？

特别是当我考虑以下场景时，TaskEditComponent 被不同的组件“调用”：

应该导航回 TaskListComponent：

OverviewComponent->TaskListComponent->TaskEditComponent 回到List

应该导航回概览组件：

概览组件->任务编辑组件

Answer 1

使用ngrx ，让您的商店也处理路由器状态，保留redux范式是有意义的。 然后，您只需在效果中发送一个路由器操作，以响应您的成功操作。

这具有能够“ 时间旅行”路线以及应用程序状态的其余部分的额外好处。

幸运的是，已经有一个可以使用的路由器-存储集成实现。

---

你可以做这样的事情（只是一个指导，增强你的需求）：

应用模块

import { StoreRouterConnectingModule, routerReducer } from '@ngrx/router-store'; import { App } from './app.component'; @NgModule({ imports: [ BrowserModule, StoreModule.forRoot({ routerReducer: routerReducer }), RouterModule.forRoot([ // ... { path: 'task-list', component: TaskListComponent }, { path: 'error-page', component: ErrorPageComponent } ]), StoreRouterConnectingModule ], bootstrap: [App] }) export class AppModule { }

任务效果

import { go } from '@ngrx/router-store'; @Effect() addTask: Observable<Action> = this.actions$ .ofType(LeadAction.ADD_TASK_SUCCESS) .map((action: LeadAction.AddTaskSuccessAction) => action.payload) .map((payload: any) => go('/task-list')); // use payload to construct route options @Effect() addTask: Observable<Action> = this.actions$ .ofType(LeadAction.ADD_TASK_FAILURE) .mapTo(go('/error-page'));

---

使用具有最新功能的 NGRX v8+ 进行更新：

应用模块：

 import { StoreRouterConnectingModule, routerReducer } from '@ngrx/router-store'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, StoreModule.forRoot({ routerReducer }), RouterModule.forRoot([ // ... { path: 'task-list', component: TaskListComponent }, { path: 'error-page', component: ErrorPageComponent } ]), StoreRouterConnectingModule.forRoot(), ], bootstrap: [AppComponent], }) export class AppModule {}

任务效果：

 @Injectable() export class TaskEffects { readonly addTaskSuccess$ = createEffect(() => this.actions$.pipe( ofType(LeadAction.ADD_TASK_SUCCESS), tap(() => this.router.navigate(['task-list'])), ), { dispatch: false }, ); readonly addTaskFailure$ = createEffect(() => this.actions$.pipe( ofType(LeadAction.ADD_TASK_FAILURE), tap(() => this.router.navigate(['error-page'])), ), { dispatch: false }, ); constructor( private readonly actions$: Actions, private readonly router: Router, ) {} }