导航到 url 时未执行 dataPersistence.navigation

Question

在以前使用 Angular 8 和 9 的应用程序中，我使用的是基于类的操作，而不是操作创建器。这一次，我决定尝试使用动作创建器。但是，我遇到了一个问题：我之前使用this.dataPersistence.navigation(...) 用于基于导航执行的异步方法和成功操作，现在它被包裹在createEffect(() => ...) 中，但它似乎不起作用（无论它是否被包裹)

这是设置，其中大部分是样板：

package.json

"@nrwl/angular": "9.2.4",
...
"@angular/cli": "9.1.0",
"@nrwl/workspace": "9.2.4",

action.ts

export const setActivePanelId = createAction('[Interactions] Set Active Panel ID', props<{ id: string }>());

app.routes

const routes: Routes = [
  {
    path: '',
    component: MessagesContainer
  }
];

interactions.effects.ts

 onNav$ = createEffect(() =>
    this.dataPersistence.navigation(MessagesContainer, {
      run: (a: ActivatedRouteSnapshot): Observable<Action> | Action | void => {
        //An example callback, no async used yet.
        return setActivePanelId({id: a['snapshot'].queryParams.panelId});
      },
      onError: (a: ActivatedRouteSnapshot, e: any): any => {
        console.warn(e);
      }
    }));

app.module.ts

@NgModule({
  declarations: [AppComponent, MessagesContainer],
  imports: [
    BrowserModule,
    ComponentsModule,
    RouterModule.forRoot(routes, routingOptions),
    EffectsModule.forRoot([]),
    NxModule.forRoot(),
    StoreRouterConnectingModule.forRoot(),
    StoreModule.forRoot({}, { metaReducers: [] }),
    StoreDevtoolsModule.instrument({
      maxAge: 20,
      logOnly: config.environment.production
    }),
    InteractionsModule
  ],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {
}

interactions.module.ts

@NgModule({
  imports: [
    CommonModule,
    StoreModule.forFeature(
      fromInteractions.INTERACTIONS_FEATURE_KEY,
      fromInteractions.reducer
    ),
    EffectsModule.forFeature([InteractionsEffects]),
    StoreModule.forFeature(
      fromInteractions.INTERACTIONS_FEATURE_KEY,
      fromInteractions.reducer
    )
  ],
  providers: [InteractionsFacade]
})
export class InteractionsModule {}

更新： 我也试过了

@Effect() nav$ = createEffect(() =>
    this.actions$.pipe(
      // listens for the routerNavigation action from @ngrx/router-store
      navigation(MessagesContainer, {
        run: (activatedRouteSnapshot: ActivatedRouteSnapshot) => {
          return setActivePanelId({id: 'async!'});
        },

        onError: (
          activatedRouteSnapshot: ActivatedRouteSnapshot,
          error: any
        ) => {
          // we can log and error here and return null
          // we can also navigate back
          console.warn(error)
          return null;
        }
      })
    )
  );

Answer 1

请参考https://nx.dev/latest/angular/guides/misc-data-persistence StoreRouterConnectingModule 必须使用适当的序列化程序进行配置。 DefaultRouterStateSerializer 提供完整的路由器状态，而不是无需配置即可使用的 MinimalRouterStateSerializer。

import { NgModule } from '@angular/core';
import {
  StoreRouterConnectingModule,
  DefaultRouterStateSerializer,
} from '@ngrx/router-store';

@NgModule({
  imports: [
    StoreRouterConnectingModule.forRoot({
      serializer: DefaultRouterStateSerializer,
    }),
  ],
})
export class TodosModule {}

Answer 2

我的第一反应是问你是否在任何地方导入了NxModule.forRoot()？我通常把它放在我的应用程序根模块中。

除此之外，如果你坚持这种模式：

onNav$ = createEffect(() =>
this.dataPersistence.navigation(MessagesContainer, {

你做得对。

这是我正在处理的另一个项目中非常相似（工作）的代码：

`selectCustomer$ = createEffect(() =>
    this.dataPersistence.navigation(CustomerDetailComponent, {
        run: (
            r: ActivatedRouteSnapshot,
            _state: CustomerDetailPartialState
        ) => {
            const customerId = grabIdFromParams(r.paramMap);

            return CustomerDetailActions.customerSelected({ customerId });
        },
        onError: (_a: ActivatedRouteSnapshot, error: any) => {
            throw new Error(error);
        }
    })
);`

很遗憾，我没有任何其他建议。我希望有所帮助或其他人有更好的东西。祝你好运！