Ionic2如何在幾個模塊中組織代碼以收集「app.module.ts」

Question

繼ionic2初學者指南後，我有一個「[my project] \ 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 {} 

我看起來會變得凌亂。

所以我想如果有可能有一些子模塊，將通過「[我的項目]的\ src \程序\ app.module.ts」

類似的東西被稱爲： 下「[我的項目]的\ src \ \網頁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文件中分解它，這些文件都將從[my project] \ 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 {} 

只需導入這個新的模塊在你的主（app.module.ts）模塊

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

編號：Ionic Page Module