Angular forRoot方法可以从另一个模块返回Root吗?

时间:2018-04-09 01:24:07

标签: angular angular-module

我想知道静态方法forRoot是否可以从另一个模块返回forRoot调用?

我刚刚配置了ngrx商店,并希望避免在app.module中有很多导入,所以我创建了ConfiguredStoreModule,在forRoot方法中我返回StoreModule.forRoot(config)。一切正常,但这种方法是否打破了任何良好的做法或惯例? 这样做的另一个好处是可以注册已经用于效果的提供者,他们应该是单身人士。一切都在一个地方。

// ConfiguredStore.module.ts
import {ModuleWithProviders, NgModule} from '@angular/core';
import { CommonModule } from '@angular/common';
import {metaReducers, reducers} from './index';
import {StoreModule} from '@ngrx/store';
import {TestService} from './my-budgets/test.service';
import {myBudgetsEffects} from './my-budgets/effects';
import {EffectsModule} from '@ngrx/effects';

@NgModule({
  imports: [
    CommonModule,
  ],
  declarations: [],
  exports: [

  ]
})
export class ConfiguredStoreModule {
  static forRoot(): ModuleWithProviders[] {
    return [
      StoreModule.forRoot(reducers, {metaReducers}),
      EffectsModule.forRoot([...myBudgetsEffects, /*...effects from another folder*/]),
      {
        ngModule: ConfiguredStoreModule,
        providers: [TestService]
      },
    ]
  }

}

// AppModule
import {BrowserModule} from '@angular/platform-browser';
import {NgModule, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import {HttpModule} from '@angular/http';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {ScrollToModule} from '@nicky-lenaers/ngx-scroll-to';
import {StoreModule} from '@ngrx/store';
import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
import { HttpClientModule} from '@angular/common/http';
import {CoreModule} from './modules/core/core.module';
import 'lodash';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { environment } from '../environments/environment';
import { reducers, metaReducers } from './store';
import {ConfiguredStoreModule} from './store/store.module';


export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    AppRoutingModule,
    CoreModule,
    //StoreModule.forRoot(reducers, { metaReducers }),
    ConfiguredStoreModule.forRoot(),
    !environment.production ? StoreDevtoolsModule.instrument() : [],
  ],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {
}

1 个答案:

答案 0 :(得分:0)

尝试一下

// ConfiguredStore.module.ts
import {ModuleWithProviders, NgModule} from '@angular/core';
import { CommonModule } from '@angular/common';
import {metaReducers, reducers} from './index';
import {StoreModule} from '@ngrx/store';
import {TestService} from './my-budgets/test.service';
import {myBudgetsEffects} from './my-budgets/effects';
import {EffectsModule} from '@ngrx/effects';

@NgModule({
  imports: [
    CommonModule,
    EffectsModule
  ],
  declarations: [],
  exports: [
    EffectsModule
  ]
})
export class ConfiguredStoreModule {
  static forRoot(): ModuleWithProviders[] {
    return [
      StoreModule.forRoot(reducers, {metaReducers}),
      EffectsModule.forRoot([...myBudgetsEffects, /*...effects from another folder*/]).providers,
      {
        ngModule: ConfiguredStoreModule,
        providers: [TestService]
      },
    ]
  }