2016-11-22 15 views
0

https://angular.io/docs/ts/latest/guide/router.html#!#guardsのガイドに従うと、別のルートを素敵なバイトサイズのモジュールに分割しています。しかし、各モジュールですべてを含める必要がある場合rel。サービス、プロバイダ、パイプ...角2子モジュールが親サービスを継承しています

ang2は子モジュールへのインポートをパススルーしますか?

例: ...

@NgModule({ 
    imports: [ 
     BrowserModule, 
     DndModule.forRoot(), 
     HttpModule, 
     FormsModule, 
     ReactiveFormsModule, 
     AppRoutingModule, 
     StoreModule.provideStore(
      StoreLoader.reducers(), 
      StoreLoader.initialState() 
     ), 
     StoreDevtoolsModule.instrumentStore({ 
      monitor: useLogMonitor({ 
       visible: BootstrapDataService.reduxStoreDebug(), 
       position: 'right' 
      }), 
     }), 
     StoreLogMonitorModule, 
     TranslateModule.forRoot({ 
      provide: TranslateLoader, 
      useFactory: (http: Http) => new TranslateStaticLoader(
       http, 
       window.crowdRoute + 'assets/i18n', 
       '.json' 
      ), 
      deps: [Http] 
     }) 
    ], 
    declarations: [ 
     //Pipes 
     SummaryPipe, 
     DateFormatPipe, 
     MomentDatePipe, 
     TimeAgoPipe, 
     SanitizeHtml, 
     SafePipe, 
     ValuesPipe, 
     DisplayNamePipe, 
     UserHasPermissionPipe, 
     UserHasRolePipe 
    ], 
    bootstrap: [CrowdComponent], 
    providers: [ 
     BootstrapDataService, 
     CommentService, 
     Helpers, 
     ImageService, 
     ProjectService, 
     SuggestionService, 
     AuthService, 
     AuthResolver, 
     { 
      provide: APP_BASE_HREF, 
      useValue: window.crowdRoute 
     }, 
     { 
      provide: Http, 
      useFactory: (xhrBackend: XHRBackend, requestOptions: RequestOptions, router: Router) => new CrowdHttp(xhrBackend, requestOptions, router, null), 
      deps: [XHRBackend, RequestOptions, Router] 
     }, 
     { 
      provide: BrowserXhr, 
      useClass: CrowdBrowserXHR 
     } 
    ] 
}) 
export class CrowdModule {} 

今のアプリはそう今、すべてのプロバイダなどがアプリの残りの部分を通過している。各エリアのためのモジュールを分割しているものではありません。

しかし...のAng2 plunker https://angular.io/resources/live-examples/router/ts/plnkr.htmlから:

@NgModule({ 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HeroesModule, 
    LoginRoutingModule, 
    AppRoutingModule 
    ], 
    declarations: [ 
    AppComponent, 
    LoginComponent 
    ], 
    providers: [ 
    DialogService 
    ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { 
} 

メインapp.module.ts自体はなど

答えて

1

、独自のルーティングを含めたモジュールが含まれて私はからの輸入を渡すのいずれかの方法を知りません親モジュールから子モジュールへ

Angular 2には、複数のモジュール間で共通のインポートを共有し、SharedModuleを使用して定型文を減らす方法がありますが、参照: https://angular.io/styleguide#04-10

ような何か:

@NgModule({ 
    exports: [ 
    BrowserModule, 
    DndModule.forRoot(), 
    HttpModule, 
    FormsModule, 
    ReactiveFormsModule, 
    AppRoutingModule, 
    StoreModule.provideStore(
     StoreLoader.reducers(), 
     StoreLoader.initialState() 
    ), 
    StoreDevtoolsModule.instrumentStore({ 
     monitor: useLogMonitor({ 
      visible: BootstrapDataService.reduxStoreDebug(), 
      position: 'right' 
     }), 
    }), 
    SummaryPipe, 
    DateFormatPipe, 
    MomentDatePipe, 
    TimeAgoPipe, 
    SanitizeHtml, 
    SafePipe, 
    ValuesPipe, 
    DisplayNamePipe, 
    UserHasPermissionPipe, 
    UserHasRolePipe 
    StoreLogMonitorModule, 
    TranslateModule.forRoot({ 
     provide: TranslateLoader, 
     useFactory: (http: Http) => new TranslateStaticLoader(
      http, 
      window.crowdRoute + 'assets/i18n', 
      '.json' 
     ), 
     deps: [Http] 
    })] 
}) 
export class SharedModule { 
    static forRoot(): ModuleWithProviders { 
    return { 
     ngModule: SharedModule, 
     providers: [ 
      BootstrapDataService, 
      CommentService, 
      Helpers, 
      ImageService, 
      ProjectService, 
      SuggestionService, 
      AuthService, 
      AuthResolver, 
      { 
       provide: APP_BASE_HREF, 
       useValue: window.crowdRoute 
      }, 
      { 
      provide: Http, 
       useFactory: (xhrBackend: XHRBackend, requestOptions: RequestOptions, router: Router) => new CrowdHttp(xhrBackend, requestOptions, router, null), 
       deps: [XHRBackend, RequestOptions, Router] 
      }, 
      { 
       provide: BrowserXhr, 
       useClass: CrowdBrowserXHR 
      } 
      ]] 
     }; 
    } 
} 

そしてあなたの子供とメインモジュール内にインポートする必要があるすべてはあなたのモジュールのSharedModuleと特定の(一般的ではないが)輸入品ということです。 https://github.com/mgechev/angular-seed/blob/master/src/client/app/shared/shared.module.ts

:あなたは、角シードプロジェクトにこの良い実装を見ることができます

@NgModule({ 
    imports: [ 
     , SharedModule] 
     ... Other code 
    }) 
export class MyModule { } 

関連する問題