问题描述
我有一个 CoreModule
急切加载并包含主应用程序状态,还有一个 ContractHolder.module
使用 NgxsModule.forFeature([ContractHolderState])
声明要添加到主应用程序的新状态已加载。但是,延迟加载模块中的组件看到的初始状态为 {}
(因此未按照 ContractHolderState
中的定义进行初始化),稍后当 ContractHolderState
的 {{ 1}} 处理程序更新状态。
在应用的其余部分,我看到包含初始化的 @Action
的应用状态,但是当 ContractHolderState
更新它时它没有更新!
简而言之,我的延迟加载模块根本看不到应用程序状态,而是看到了一个由惰性状态 ContractHolderState
更新的空对象,而应用程序的其余部分看到的是初始值为 ContractHolderState
定义,但从未更新。
代码:
ContractHolderState
,定义主应用程序状态并由 Core.module
导入:
App.module
我有 const ngxsstates = [ConfigurationState,AuthenticationAuthorizationState];
@NgModule({
imports: [
NgxsstoragePluginModule.forRoot({
key: appStateNames.authorization,}),NgxsModule.forRoot(ngxsstates,{ developmentMode: !environment.production }),// <--- NGXS states
NgxsReduxDevtoolsPluginModule.forRoot(),NgxPermissionsModule.forRoot(),],providers: [...],exports: [...],declarations: [...],})
export class CoreModule {}
是延迟加载的:
ContractHolder.module
这是@NgModule({
declarations: [MainViewComponent],imports: [
CommonModule,CoreModule,// <--- imports core module with the main state
RouterModule.forChild([{
path: '',component: MainViewComponent,}]),NgxsModule.forFeature([ContractHolderState]) // <--- declares state
],})
export class ContractHolderModule { }
:
ContractHolderState
@State<ContractHolderStateModel>({
name: appStateNames.contractHolders,defaults: {
contractHolders: [],},})
export class ContractHolderState {
@Selector()
static contractHolders(state: ContractHolderStateModel): IContractHolder[] {
return state.contractHolders;
}
}
中的路由定义是如何延迟加载 ContractHolder.module
的:
app-routing.module
现在合约持有者模块中使用的 const routes: Routes = [
{
path: 'home-page',component: PageComponent,children: [
{
path: 'ch',outlet: 'page',loadChildren:
(): Promise<ContractHolderModule> => import('./contract-holder/contract-holder.module')
.then(m => m.ContractHolderModule) // <--- lazy-loaded ContractHolder.module
},]
},{
path: '**',component: LoginComponent
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],exports: [RouterModule],})
export class AppRoutingModule {}
通过 main-view.component
查看状态。我还尝试查看返回空对象的 @Select(ContractHolderState.contractHolders) allCh$: Observable<IContractHolder[]>;
。 this.store.snapshot()
更新状态后,它不再是一个空对象,但状态的其余部分(来自应用程序的其余部分)永远不会存在。
在发生这种情况时,主应用程序会看到完整状态,但 ContractHolderState
始终具有其默认值 ContractHolderState
,并且永远不会更新。
解决方法
问题在于导入了不止一次定义主状态的 CoreModule
。我们有多个模块导入核心模块。我保留了 App 模块导入的核心模块,所有其他功能现在都在一个新的 SharedModule 中。