导航到url时dataPersistence.navigation未执行
提问于 2020-05-11 18:59:03
在以前使用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;
}
})
)
);
回答 2
Stack Overflow用户
发布于 2021-04-23 13:34:05
请参考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 {}Stack Overflow用户
发布于 2020-05-11 23:42:56
我的第一个直觉是问你是否在任何地方导入了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);
}
})
);`不幸的是，我没有其他的建议。我希望这会有帮助，或者其他人有更好的东西。祝你好运！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61737274
复制相关文章
腾讯云开发者
