Question

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

CoreModule（包含api调用和模型的服务）
MainModule（包含主应用程序的组件）
MainDetailModule（包含详细视图的功能，延迟加载）
MainStoreModule（包含ngrx / store定义，操作，缩减等）。

main.module.ts（MainModule）

// 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。

在整个主应用程序中，我的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 store（StoreModule.forFeature('feature-name', {feature-reducers})）加载延迟加载的模块时，我有类似的意外行为。商店被重新初始化，之前发送的所有行动都被重新发送。

通过从ngrx o 4.1.1

升级5.2.0来解决此问题

Answer 3

我创建了一个试图重现问题的存储库。你可以在GitHub上找到它：https://github.com/GregOnNet/ngrx-lazy-feature

您将看到商店未重新初始化。延迟加载的功能可以访问应用程序的当前状态。

与@the_makeshift_dev一样，延迟加载的模块不得导入MainStoreModule。

请您检查一下存储库并告诉我可能错过的内容吗？

Answer 4

这是我正在处理的一个repo，其中包含如何使根存储和功能存储与延迟加载一起工作的示例。

https://github.com/paulparton/angular-shared-core

如何使用ngrx / store功能模块处理延迟加载的模块？

4 个答案: