代码之家 › 专栏 › 技术社区 › Gregor Doroschenko

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

ngrx-store ngrx angular

Gregor Doroschenko · 技术社区 · 8 年前

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

CoreModule(包含用于api调用和模型的服务)
MainModule(包含主应用程序的组件)
MainDetailModule(包含详细视图函数,延迟加载)
主存储模块(包含ngrx/存储定义、操作、减速机等)

主要的单元ts(主模块)

// imports

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

主要细节。单元ts(MainDetailModule)

// imports

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

主要商店。单元ts(主存储模块)

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将通过单击detail链接延迟加载。

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

2 回复 | 直到 5 年前

Borys Kupar 8 年前

在用ngrx存储加载延迟加载模块时,我也有过类似的意外行为( StoreModule.forFeature('feature-name', {feature-reducers}) ). 存储已重新初始化,之前调度的所有操作都已再次调度。

通过升级 ngrx 从…起 4.1.1 o 5.2.0

the_makeshift_dev 8 年前

如果计划延迟加载MainDetailModule,则无法在其中导入MainStoreModule。这样做将导致它生成主存储的另一个实例。如果您只想订阅主存,而没有任何功能级缩减器, 我相信您可以按原样导入StoreModule,即。

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

如果您有功能级缩减器,那么您将使用

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