首页 > 解决方案 > 导入在ngrx中实现的模块并通过覆盖服务重用效果

问题描述

我在导入和重用使用 ngrx 实现的模块时遇到问题。在简单的 Angular 实现中,下面是用例

// Module
@NgModule({
    imports: [
        CommonModule
    ],
    declarations: [BaseComponent],
    exports: [
        BaseComponent
    ],
    providers: [
        BaseService
    ]
})
export class BaseModule { }

//component
@Component({
  selector: 'base-comp',
  templateUrl: './base.component.html',
  styleUrls: ['./base.component.css']
})
export class BaseComponent implements OnInit {

  constructor(public service: BaseService) { }

  ngOnInit() {
  }

}

如果我将 BaseModule 导入另一个模块,覆盖服务并使用“base-comp”组件,我会在 BaseComponent 中注入 OverriddenService 实例

// module
@NgModule({
    imports: [
        CommonModule,
        RouterModule.forChild([{
            path: '',
            component: SecondComponent
        }]),
        BaseModule,
    ],
    declarations: [SecondComponent],
    providers: [
        { provide: BaseService, useClass: OverridenService }
    ]
})
export class SecondModule { }

这一切都按预期工作。现在,如果我使用 ngrx 实现了模块,并且服务被注入到 BaseEffect (base-effect.ts) 的构造函数中 - 如何获得相同的结果?如果我在 SecondModule 中注册一个新效果,将有两个订阅相同的动作。

 @Injectable()
export class BaseEffect {
  constructor(private actions$: Actions,
    private service: BaseService
  ) {
  }

  // Listing
  @Effect()
  listSegments$: Observable<Action> = this.actions$.ofType<MyAction>(MY_ACTION)
    .map((action: MyAction) => action.payload)
    .mergeMap((payload: Query) => {
      return this.service.getList(payload).map(response =>
        new ActionComplete(response)
      )
    });
}

标签: angularngrxeffectsngrx-effects

解决方案


推荐阅读