Ionic2如何在几个模块中组织代码以收集“app.module.ts”

Question

按照ionic2初学者的指南，我有一个“[我的项目] \ src \ app \ app.module.ts”看起来像这样：

    //Standard modules
    import { NgModule } from '@angular/core';
    import { IonicApp, IonicModule } from 'ionic-angular';
    import {Http} from '@angular/http';
     .... //possibly some more Standard modules


    ////Special Modules
    //module translate
    import { TranslateModule, TranslateStaticLoader, TranslateLoader } from 'ng2-translate/ng2-translate';
    export function createTranslateLoader(http: Http) {
        return new TranslateStaticLoader(http, './assets/i18n', '.json');
    }


    //my pages list 
    import { MyApp } from './app.component';
    import { MyPage1 } from '../pages/page-1/page-1';
    import { MyPage2 } from '../pages/page-2/page-2';
...
    import { MyPageN } from '../pages/page-n/page-n';

    //some custom component (graph elements I use in the pages)
    import { MyCustomGraph1Diagram } from '../custom-components/my-custom-graph-1/my-custom-graph-1';
    import { MyCustomGraph2Diagram } from '../custom-components/my-custom-graph-2/my-custom-graph-2';
...
    import { MyCustomGraphNDiagram } from '../custom-components/my-custom-graph-n/my-custom-graph-n';


    //my custom services
    import { MyService1 } from '../services/service-1/service-1';
...
    import { MyServiceN } from '../services/service-n/service-n';


    //my custom pipes
    import { MyPipe1 } from '../custom-pipes/pipe-1/pipe-1';
...
    import { MyPipeN } from '../custom-pipes/pipe-n/pipe-n';

    @NgModule({
      declarations: [
        MyApp,
        MyPage1,
        ...
        MyPageN,
        MyCustomGraph1Diagram,
        ...
        MyCustomGraph2Diagram,
        MyPipe1,
        ....
        MyPipe1 
      ],
      imports: [
        IonicModule.forRoot(MyApp),
        TranslateModule.forRoot({provide: TranslateLoader,
          useFactory: (createTranslateLoader),
          deps: [Http]})
      ],
      bootstrap: [IonicApp],
      entryComponents: [
        MyApp,
        MyPage1,
        ...
        MyPageN,
      ],
      providers: [
        MyService1,
        ...
        MyService2
      ]
    })
    export class AppModule {}

我看起来会变得凌乱。

所以我想知道是否有可能有一些子模块可以被“[my project] \ src \ app \ app.module.ts”调用

类似的东西：在“[my project] \ src \ pages \ pages.module.ts”下：

    //my pages list 
    import { MyApp } from './app.component';
    import { MyPage1 } from '../pages/page-1/page-1';
    import { MyPage2 } from '../pages/page-2/page-2';
...
    import { MyPageN } from '../pages/page-n/page-n';


    @NgModule({
      declarations: [
        MyPage1,
        ...
        MyPageN,
      ],
      imports: [
              ???
      ],
      bootstrap: [???],
      entryComponents: [
        MyPage1,
        ...
        MyPageN,
      ],
    })
    export class PagesModule {}

等等其他类别。

所以我可以在几个* .module.ts文件中打破它，它将全部从[我的项目] \ src \ app \ app.module.ts启动。

Answer 1

它与Angular2中的相似。不同之处在于，对于所有模块，您应该添加IonicModule.forRoot(MyApp)。并将模块导出为IonicModule，但不是TodoModule。像这个模块：

import { NgModule }       from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { MyApp } from '../../app/app.component';
import { TodoListComponent }    from './list/list.component';
import { TodoDetailComponent }  from './detail/detail.component';

import { TodoService } from './todo.service';

@NgModule({
  imports:      [CommonModule, FormsModule, IonicModule.forRoot(MyApp)],
  declarations: [TodoListComponent, TodoDetailComponent],
  entryComponents:[TodoListComponent, TodoDetailComponent],
  providers:    [TodoService],
  exports:      [IonicModule]
})
export class TodoModule {}

我不知道在每个模块中我需要在进口中添加IonicModule.forRoot(MyApp)。

然后，在您的主模块中，只需导入此模块作为正常模块即可。

Answer 2

IonicPageModule

@NgModule({
  declarations: [
    MyPage
  ],
  imports: [
    IonicPageModule.forChild(MyPage)
  ],
  entryComponents: [
    MyPage
  ]
})
export class MyPageModule {}

只需在main（app.module.ts）模块中导入这个新模块

...
IonicModule.forRoot(MyApp),
MyPageModule 
...

参考：Ionic Page Module