如何使 ngrx/store 功能模块与延迟加载模块一起工作？

Question

在我的 angular 应用程序中，我有一些功能模块：

CoreModule（包含 api 调用和模型的服务）
MainModule（包含主应用程序的组件）
MainDetailModule（包含详细视图的函数，延迟加载）
MainStoreModule（包含 ngrx/store 定义、动作、reducer 等）

main.module.ts（主模块）

// imports

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    CoreModule,
    MainRoutingModule,
    TranslateModule.forChild(),
    BsDropdownModule.forRoot(),
    MainDetailModule,
    MainStoreModule
  ],
  declarations: [
    // components
  ],
  providers: []
})
export class MainModule { }

main-detail.module.ts (MainDetailModule)

// imports

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    MainDetailRoutingModule,
    TranslateModule.forChild(),
    MainStoreModule
  ],
  declarations: [
    // components
  ]
})
export class MainDetailModule { }

main-store.module.ts (MainStoreModule)

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { metaReducers, rootReducers } from './reducer/root.reducer';

@NgModule({
  imports: [
    CommonModule,
    StoreModule.forRoot(rootReducers, {metaReducers}),
    StoreDevtoolsModule.instrument({
      maxAge: 10
    })
  ],
  declarations: []
})
export class MainStoreModule { }

我的 MainModule 导入了 CoreModule、MainStoreModule 和 MainDetailModule。 MainDetailModule 将通过单击详细信息 link.

延迟加载

在整个主应用程序中，我的 MainStore 运行良好。但是，如果我导航到 MainDetailModule，MainStoreModule 将被重新初始化，因此它将保持为空。我知道 ngrx/store 可以与延迟加载的模块一起工作，我知道 .我的问题是如何让我的 MainStoreModule 与我的延迟加载模块一起工作？我是否应该在我的 MainStoreModule 中实现类似的函数，例如 forRoot() 和 forChild()？

Answer 1

如果您打算延迟加载 MainDetailModule，则不能在其中导入 MainStoreModule。这样做会导致它生成主存储的另一个实例。如果您只想订阅主商店并且没有任何功能级别的缩减程序，我相信您可以按原样导入 StoreModule 即

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    MainDetailRoutingModule,
    TranslateModule.forChild(),
    StoreModule
  ],
  declarations: [
   // components
  ]
})
export class MainDetailModule { }

如果你有功能级减速器，那么你会使用

StoreModule.forFeature('feature-name', {feature-reducers})

Answer 2

我在使用 ngrx 存储 (StoreModule.forFeature('feature-name', {feature-reducers})) 加载延迟加载模块时遇到了类似的意外行为。 store为re-initialised，之前派发的所有action都重新派发了。

问题已通过从 4.1.1 升级 ngrx o 5.2.0

解决

如何使 ngrx/store 功能模块与延迟加载模块一起工作？

How can I bring ngrx/store feature module to work with lazy loaded modules?

ngrx

angular

ngrx-store