Question

我觉得好像我已经高低搜索了一个必须多次解释的问题的合理答案。尽管如此，我试图找到任何方式来声明模块依赖，而无需将其全部放在app.module.ts文件中。

通过在一个文件中声明所有依赖项，它会迫使大型应用程序很快变得难以处理。

通过在模块中声明特定模块依赖项，有更好的方法吗？

我当前的app.module.ts文件示例

    import { NgModule } from '@angular/core';
    import { UniversalModule } from 'angular2-universal';
    import { ReactiveFormsModule, FormsModule } from '@angular/forms';
    import { HttpModule } from '@angular/http';
    import { AppComponent } from './components/app/app.component'
    import { NavMenuComponent } from './components/navmenu/navmenu.component';
    import { HomeComponent } from './components/home/home.component';
    import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
    import { CounterComponent } from './components/counter/counter.component';
    import { HeroDetailComponent } from './components/hero/hero-detail.component';
    import { HeroListComponent } from './components/hero/hero-list.component';
    import { HeroService } from './components/hero/hero.service';
    import { HeroDashboardComponent } from './components/hero/hero-dashboard.component';
    import { HeroMainComponent } from './components/hero/hero-main.component';
    import { HeroFormComponent } from './components/form/hero-form.component';
    import { HeroFormReactiveComponent } from './components/form-reactive/form-reactive.component';
    import { HeroFormReactiveMainComponent } from './components/form-reactive/form-main.component';
    import { ReactiveListComponent } from './components/form-reactive/hero-list.component';
    import { DataService } from './components/form-reactive/data.service';
    import { CoreTrackingMainComponent } from './components/core/coreTrackingMain.component';
    import { AppRoutingModule } from './app.routes'


@NgModule({
    bootstrap: [ AppComponent ],
    declarations: [
        AppComponent,
        NavMenuComponent,
        CounterComponent,
        FetchDataComponent,
        HomeComponent, 
        HeroDetailComponent,
        HeroListComponent,
        HeroDashboardComponent,
        HeroMainComponent,
        HeroFormComponent,
        HeroFormReactiveComponent,
        HeroFormReactiveMainComponent,
        ReactiveListComponent,
        CoreTrackingMainComponent],
    imports: [
        UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.
        HttpModule,
        FormsModule,
        AppRoutingModule,
        ReactiveFormsModule
    ],
    providers: [HeroService, DataService]
})

例如，是否可以在这些模块中声明一些依赖项。

import { Component, NgModule } from '@angular/core';
import { CoreTrackingCriteriaComponent } from './coreTrackingCriteria.component';

@NgModule({
    declarations: [CoreTrackingCriteriaComponent],
    exports: [CoreTrackingCriteriaComponent]
})

@Component({
    selector: 'my-app',
    templateUrl: './coreTrackingMain.component.html' 
})
export class CoreTrackingMainComponent { }

我似乎无法让它工作而无需在module.app.ts

中声明所有内容

Answer 1

如果我正确地阅读了您的问题，您正在寻找的是延迟加载模块： https://angular.io/docs/ts/latest/guide/ngmodule.html#!#lazy-load

您在该模块中定义所有依赖项，然后在路由器中懒惰地加载该模块。在根模块中没有任何关于它。

使用NgModule声明子模块的最佳实践

1 个答案: