Question

在关注https://angular.io/docs/ts/latest/guide/router.html#!#guards的指南中，我们将不同的路由分解成一个很好的一口大小的模块。但是，如果对于每个模块，我需要包含所有的rel，这似乎是代码中的一点开销。服务，提供商和管道......

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包含自己包含自己路由等的模块。

Answer 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和特定（非常见）导入。

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

您可以在角度种子项目中看到一个很好的实现：https://github.com/mgechev/angular-seed/blob/master/src/client/app/shared/shared.module.ts

angular 2子模块继承父服务

1 个答案: