[dataPersistence.navigation在导航到url时不执行

Question

[在以前使用Angular 8和Angular 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 }>());

应用路线

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);
      }
    }));

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

我的第一个直觉是问您是否从任何地方进口过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);
        }
    })
);`

很遗憾，我没有其他建议。希望对您有所帮助或对您有所帮助。祝你好运！